Typahead Bloodhound提示和自动完成不使用远程URL

Question

我不知道为什么它与远程URL不起作用。当相同的结果/JSON数组在本地加载时，它的工作正常。

我的代码

 var bh_engine = new Bloodhound({
                datumTokenizer: function(d) {

                    var my_string = d.company_name;
                    my_string = my_string.replace(/s/g, "");
                    var string_length = my_string.length;
                    var my_matches = [];
                    for (var i = 0; i < string_length; i++) {
                        my_matches.push(my_string.substring(i, string_length));
                    }
                    return my_matches;
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: local_source,
                prefetch: prefetch_source,
                remote: remote_source
            });
         bh_engine.initialize();

            $(apply_on_element + ' .bootstrap-tags-input input#mytaginput').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
            }, {
                async:true,
                displayKey: 'company_name',
                source: bh_engine.ttAdapter()

            });

JSON数据

[{"company_name":"Google","code":1},{"company_name":"Facebook","code":2}]

在本地和远程使用相同的数据测试。它仅在远程访问中给出问题。

有什么想法吗？为什么？

您也可以在这里检查 jsfiddle

第一种类型的" String1"或" String2"等上的字符串...

，然后使用远程数据类型" data30"等等.....

它每次显示JSON对象的第一个元素

您可以看到大胆/突出显示功能正常工作，但提示不

我只想在输入" data50"或至少在列表中的第一名

Answer 1

您可以在远程对象上使用Blood -Hound Transform方法来模拟针对本地数据实现的相同行为。

window.bh = bloodhoundSuggestions = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      sufficient: 3,
      local: suggestions,
      remote: {
          url: 'https://www.mockaroo.com/api/generate.json?key=9c13bbb0&schema=typeahead',
          transform: function(response) {
            // input selector
            var input = $("#tagsInput").val();
              return response.filter( function (item) {
                return input.toLowerCase() == item.value.toLowerCase().substr(0, input.length);
            });
         }
      },
  });

jsfiddle-只需输入数据