Typeahead Bloodhound 提示和自动完成功能不适用于远程 URL

Posted 2023-05-07

【中文标题】Typeahead Bloodhound 提示和自动完成功能不适用于远程 URL

【英文标题】：Typahead Bloodhound hint and autocomplete not working with remote url

【发布时间】：2018-03-08 12:49:20

【问题描述】：

我不知道为什么它不能使用远程 url。 当本地加载相同的结果/js​​on数组时，它工作正常。

我的代码

 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”或至少在列表中的第一位时，我只想显示“data50”

【参考方案1】：

您可以在远程对象上使用 Bloodhound 变换方法来模拟为本地数据实现的相同行为。

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 - 只需输入数据

【讨论】：

感谢我认为它可以工作，但我已经通过在 SQL 查询中添加“like”来完成一个小解决方法。它还减少了返回的数据负载。你怎么看？

@LovepreetSinghBatth 是的，如果您可以在后端执行此操作，那将是更好的方法。