我正在尝试使用typeahead.jswith在用户键入时bloodhound动态获取input字段的自动完成提示。但是，我对此很不满意，无法弄清楚如何正确地进行操作，而且我在网上发现了许多相互矛盾的示例，这些示例使我感到困惑。
这是我得到的：编辑：在注释中的建议之后更新了代码：
我的html：
<input type="text" data-provider="typeahead" placeholder="Cerca..." id="txtAutoSearchBox" />
我的JS：
$(document).ready(function () {
//setup bloodhound engine
var suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: './Suggestions.ashx?query=%QUERY',
wildcard: '%QUERY'
}
});
suggestions.initialize();
//assign it to input field
$('#txtAutoSearchBox').typeahead({
items: 4,
displayKey: 'value',
source: suggestions.ttAdapter()
});
});
每次用户在字段中输入内容时，我都可以确认对服务器的查询正确无误。服务器仅以以下形式返回字符串：
[
{"value": "test adsl"},
{"value": "test"},
{"value": "testi canzoni"},
{"value": "testo incanto"},
{"value": "testimoni di geova"},
{"value": "testo siamo uguali"},
{"value": "testo straordinario chiara"},
{"value": "testo see you again"},
{"value": "testo guerriero"},
{"value": "testosterone"}
]
但是，自动完成弹出窗口不会出现。如何编辑上面的代码以使其正常工作？
使用像这样的猎犬的过滤方法
filter: function(data) {
return $.map(data, function(item) {
return {
'value': item
};
});
}
猎犬的对象应该看起来像这样
var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: "http://output.jsbin.com/cajebe/1.json",
filter: function(data){
return $.map(data, function(item){
return {'value' : item};
});
}
}
});
PS：来自服务器的数据应为JSON格式
这是一个演示http://jsfiddle.net/dhirajbodicherla/pegp21r7/35/
提前输入缺少正确的参数。它应该是
typeaheadjs：[{options}，{datasets}]
$('#txtAutoSearchBox').typeahead(null, { // <--- missing this null
items: 4,
displayKey: 'value',
source: suggestions.ttAdapter()
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句