2017-09-27 46 views
0

我不知道爲什麼它不與遠程URL一起工作。 當它在本地加載相同的結果/ json數組時,它的工作正常。Typahead Bloodhound暗示和自動完成不能與遠程URL

我的代碼

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

第一類「字符串1」或「字符串2」等字符串...

,然後用遠程數據類型「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 - 只要輸入數據

+0

感謝我認爲它的工作,但我已經在SQL查詢中添加「喜歡」做了一個小的解決方法。它還減少了返回的數據負載。你怎麼看? –

+0

@LovepreetSinghBatth是的,如果你可以在後端做到這一點,那就更好了。 – Lukas