jquery - 在单个页面中使用多个 Bootstrap Typeahead 字段？

Question

我修改了 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);
    });

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

Answer 1

本质上，我使用模式匹配自动完成功能循环遍历 ids。然后我将 Bloodhound 和 typeahead 初始化为与模式条件匹配的元素。我从 Blade 模板上设置的 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]);
      });
    });
  }
});