jquery – 在单个页面中使用多个bootstrap Typeahead字段？

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;
        }
        });

 }

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

本质上,我使用匹配自动完成的模式遍历id.然后我将Bloodhound和typeahead初始化为符合模式标准的元素.我从用于搜索的刀片模板上设置的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]);
      });
    });
  }
});