Twitter的typeahead.js 0.11.1預取不工作

我試圖預取整JSON數據庫（55KB），使用它與typeahead.js 0.11.1。我在這一天掙扎了整整一天，我發現typeahead.js文檔非常基本。Twitter的typeahead.js 0.11.1預取不工作

我的JSON看起來是這樣的：

[{ 
    "id": 1, 
    "name": "Green" 
}, { 
    "id": 2, 
    "name": "Red" 
}, { 
    "id": 3, 
    "name": "Blue" 
}]

和JavaScript：

$(function() { 

    var tagSuggestion = new Bloodhound({ 
     datumTokenizer: function(d) { 
      return Bloodhound.tokenizers.whitespace(d.name); 
     }, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     limit: 10, 
     prefetch: { 
      url: 'ajax.json-colors.php' 
     } 
    }); 

    $('.typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 2 
    }, { 
     name: 'tagSuggestion', 
     displayKey: 'name', 
     source: tagSuggestion.ttAdapter() 
    }); 

});

我不知道我做錯了什麼，而是提前鍵入不帶預取工作。

來源

2016-08-25 denoise

您可能需要重命名您的JSON文件'ajax.json-colors.json'，而不是'ajax.json-colors.php'，並確保路徑存在。檢查是否有任何控制檯錯誤。 –

@ArathiSreekumar數據庫應該是動態的，是沒有問題的接收數據到JavaScript對象 – denoise

所以你可以看到未來通過給前端的數據？預取確實會發出ajax請求？ –

也許沿着此線的東西可能工作：

var tagSuggestion = new Bloodhound({ 
    datumTokenizer: function(d) { 
     return Bloodhound.tokenizers.whitespace(d.name); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 10, 
    prefetch: { 
     url: 'ajax.json-colors.php', 
     filter: function (data) { 
      //console.log(data.response) --> see if this is your data in example above 
      return $.map(data.response, function (tags) { 
       return { 
        name: tags.name 
       }; 
      }); 
     } 
    } 
});

這是假設回來在預取的數據是，在有數據的響應對象的形式。可能需要根據什麼data進行修改，將其傳遞給過濾器。

這是如果Ajax響應是鍵爲「響應」的密鑰值。沒有工作小提琴，我只能猜測問題。

var tagSuggestion = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: 'ajax.json-colors.php?query=%QUERY', 
     wildcard: '%QUERY' 
    } 
}); 

$('.typeahead').typeahead({ 
    minLength: 2, 
    highlight: true 
}, 
{ 
    name: 'search', 
    display: 'value', 
    source: tagSuggestion 
});

似乎預輸入不與PHP文件爲預取源工作，並且只接受JSON文本文件：

來源

2016-08-26 09:05:19

finaly的問題是使用遠程功能，改變了我的代碼如下解決。

來源

2016-11-12 11:16:51 denoise

Twitter的typeahead.js 0.11.1預取不工作

回答

相關問題