如何列出Typeahead.js和/或Bloodhound引擎的對象？

我很難搞清楚如何顯示一個json文件作爲源使用typeahead的對象列表。我的數據都沒有顯示。如何列出Typeahead.js和/或Bloodhound引擎的對象？

我想列出名稱，並在選擇時使用其他屬性的其他屬性。

../data/test.json

[ 
    {"name": "John Snow", "id": 1}, 
    {"name": "Joe Biden", "id": 2}, 
    {"name": "Bob Marley", "id": 3}, 
    {"name": "Anne Hathaway", "id": 4}, 
    {"name": "Jacob deGrom", "id": 5} 
]

test.js

$(document).ready(function() { 
    var names = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace("name"), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     prefetch: { 
      url: '../data/test.json' 
     } 
    }); 
    names.initialize(); 

    $('#test .typeahead').typeahead({ 
     name: 'names', 
     displayKey: 'name', 
     source: names.ttAdapter() 
    }); 
)};

的test.html

<div id="test"> 
    <input class="typeahead" type="text"> 
</div>

**如果有人可以解釋給我什麼datumTokenizer和queryTokenizer是，這將是可怕的**

來源

2014-10-07 Vongdarakia

JSON文件包含一個JSON對象數組，但Bloodhound建議引擎需要一個JavaScript對象數組。

因此，你需要將過濾器添加到您的預取聲明：

prefetch: { 
url: '../data/test.json', 
filter: function(names) { 
    return $.map(names, function(name) { 
    return { name: name }; 
}); 
}

至於「datumTokenizer」，它的目的是確定如何基準（即建議值）應該被標記化。正是這些令牌隨後用於與輸入查詢匹配。

例如：

Bloodhound.tokenizers.whitespace("name")

這需要一個基準（在你的情況下的名稱值），並將其分成兩個記號例如「鮑勃馬利」將被分成兩個令牌，「鮑勃」和「馬利」。

您可以看到標記者通過查看typeahead source工作的空白：

function whitespace(str) { 
str = _.toStr(str); 
return str ? str.split(/\s+/) : []; 
}

注意事項使用正則表達式爲空白如何拆分基準（\ S +即以空格的一次或多次出現）。

同樣，「queryTokenizer」也決定如何標記搜索詞。同樣，在你的例子中，你使用的是空白標記器，所以搜索詞「鮑勃馬利」將導致基準「鮑勃」和「馬利」。

因此，如果您要搜索「Marley」，則會找到「Bob Marley」的匹配項。

來源

2014-10-07 22:35:02

感謝解釋斷詞，這是有幫助的。但是我對你的陳述感到困惑，「JSON文件包含一個字符串數組，但Bloodhound建議引擎期望JavaScript對象」。我的JSON文件包含一個對象列表，而不是字符串。 – Vongdarakia 2014-10-08 13:24:03

對不起，應該說它包含一個JSON對象數組（我更新了我的答案）。 Bloodhound需要JavaScript對象，因此調用$ .map（）來產生JavaScript對象數組。 – 2014-10-08 13:27:36

看到這個小提琴http://jsfiddle.net/Fresh/UkB7u/對於地圖在行動 – 2014-10-08 13:54:09

我有一個更簡單的選項，除了一個小錯誤，你所做的是正確的。實際上，你可以像你所示的那樣使用一個對象數組。

替換displayKey: 'name'與display: 'name'它應該工作。

所以，完整的預輸入功能將類似於

$('#test .typeahead').typeahead({ 
    name: 'names', 
    display: 'name', 
    source: names.ttAdapter() 
});

來源

2017-07-10 08:29:14

如何列出Typeahead.js和/或Bloodhound引擎的對象？

回答

相關問題