6

我已经修改了 bootstrap typeahead 以在选择 typeahead 元素时将 id 与元素相关联。

function addTypeahead(element)
 {
     var labels, mapped;
     var myElement = $(element);
     console.log(myElement);
    myElement.typeahead({
        source: function (query, process){
            $.post('/edit/unassigned_list', {q: query}, function(data){
                labels = [];
                mapped = {};
                //console.log(data);
                $.each(data, function(i, item){
                    var query_label = item.name;
                    mapped[query_label] = item;
                    labels.push(query_label);
                });

                process(labels);    
            }, "JSON");
        },
        updater: function (query_label){
            var item = mapped[query_label];
            myElement.attr('person_id', item.id);
            return query_label;
        }
        });

 }

这很好用。但是，当我尝试将其设置为跨多个元素工作时，我最终会在第一个元素上遇到问题（我认为是因为我不小心让它泄漏到了全局范围内，或者我做了一些可怕的错误）。我给你举个例子

我有多个标记为 #project-auto-* 的项目元素，我在我的文档（就绪）部分运行以下代码：

$("[id^=project-auto-]").each(function(index, element){
        var local = $(element);
        addTypeahead(element);
    });

如果我只是遍历并控制台记录它们都显示的每个元素。但是，如果我尝试对其中任何一个应用预输入，则只有第一个具有预输入（并且它可以正常工作），但循环在第一个应用程序后终止。我一直在摸索和玩弄不同的范围（这就是为什么所有范围嵌套）都无济于事。我是否做了一些我完全错过的超级愚蠢的事情？

4

1 回答 1

6

本质上，我使用模式匹配自动完成循环遍历 id。然后我初始化 Bloodhound 并预先输入与模式标准匹配的元素。我从刀片模板上设置的用于搜索的 js 变量中获得了 search_url。请看下面的代码：

  $(function () {

  var $element = $('[id$=filter_autocomplete]');

  if ($element.length > 0) {
    // Loop through each element that is autocomplete
    $.each($element, function (index, element) {

       // $form      obj       name of the closest form
       // formData   string    name of the resource making the request
       // paramName  string    name of the string field
       // primaryKey string    name of the primary key
       // id         string    id of the element

      var $form = $(element).closest('form');
      var formData = $form.data('resource');
      var paramName = $(element).attr('data-field');
      var primaryKey = $(element).attr('data-primaryKey');
      var id = $(element).attr('id');

      // Sets the bhEngine as new Bloodhound object
      var bhEngine = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace(paramName),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
          url: search_url + '?value=%QUERY&resource=' + formData +  '&input_id='          + paramName,
          wildcard: "%QUERY"
        }
      });

      // Set up typeahead for each element
      $(element).typeahead(null, {
        name: paramName,
        display: paramName,
        minLength: 0,
        highlight: true,
        hint: true,
        source: bhEngine.ttAdapter(),
        templates: {
          empty: [
            '<div class="no-items">' +
            '<p class="alert alert-danger">',
            '<strong>No Items Found</strong>',
            '</p></div>'
          ].join('\n')
        }
      }).on('typeahead:selected', function (obj, datum) {
        // Set the hidden primary key field
        $("#hidden\\|" + paramName).val(datum[primaryKey]);
      });
    });
  }
});
于 2017-02-01T22:06:03.150 回答