Twitter typeahead - 向动态创建的输入框添加建议

Question

我正在使用 Twitter typeahead 为表单上的某些输入框创建建议引擎。对于加载页面时生成的输入，一切正常。但是，如果我想在按下按钮时动态添加具有相同行为的新输入，则会出现以下错误：TypeError $(...).typeahead 不是函数。该问题似乎与尝试从回调中初始化 typeahead 插件有关。我使用 JQuery 3.5.1 和 twitter typeahead 0.11.1。如何获得动态字段的提前输入方法？

function typeaheadInitialize(){
    engine = new Bloodhound({
        remote: {
          url: '/api/query_expert_by_email/*',
          wildcard: '*',
          transform: function (response) {
            return response.email;
          }
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace,
      });
    var typeaheadTarget = $('.typeahead');
    typeaheadTarget.typeahead(null, {
      name: 'my-dataset',
      source: engine
    }); //error occurs here: TypeError typeaheadTarget.typeahead is not a function
}

//works
addForm(); //Adds the form
typeaheadInitialize();

//doesn't work
$('#add-contact').on('click', function(){
    addForm(); //Adds the form (this works as expected)
    typeaheadInitialize(); //Causes the error
});

Answer 1

我设法让它工作了。 typeahead 属性在全局范围内定义，但不遵循回调函数的范围。所以我不得不使用闭包手动包含它：

var typeahead = $.fn.typeahead; // get the typeahead method

function typeaheadInitialize(){
  engine = new Bloodhound({
    remote: {
      url: '/api/query_expert_by_email/*',
      wildcard: '*',
      transform: function (response) {
        return response.email;
      }
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.whitespace,
  });
  var typeaheadTarget = $('.typeahead');
  typeAheadTarget["typeahead"] = typeahead; // add the method to the selected input
  typeaheadTarget.typeahead(null, {
  name: 'my-dataset',
  source: engine
});
}

Twitter typeahead - 向动态创建的输入框添加建议

Twitter typeahead - adding suggestion to dynamically created input boxes

javascript

jquery

typeahead.js

bootstrap-4