jQuery 带有 Typeahead JSON 远程的 Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18631145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 with Typeahead JSON remote
提问by sHaDeoNeR
I just migrated my backoffice from Boostrap 2 to Boostrap 3.
我刚刚将我的后台从 Boostrap 2 迁移到了 Boostrap 3。
My typeahead instruction give me some problems.
我的预先输入指令给了我一些问题。
On bootstrap v2 I had this :
在 bootstrap v2 上我有这个：
var typeaheadSettings = {
source: function (query, process) {
list = [];
return $.ajax({
minLength: 3,
item: 10,
url: "/ajax/articles/",
type: 'POST',
data : { query: query },
dataType: 'json',
success: function (result) {
var resultList = result.aaData.map(function (item) {
list[item.name + ' - ' + item.code + ' (' + item.category + ')'] = item.id;
return item.name + ' - ' + item.code + ' (' + item.category + ')';
});
return process(resultList);
}
});
},
updater: function (item) {
$("#parent").val(list[item]);
$(this).attr("placeholder",item);
}
};
for now, with Bootstrap 3 and typeahead (v. 0.9.3) included explicitly, I am on this part :
现在，明确包含 Bootstrap 3 和 typeahead (v. 0.9.3)，我在这部分：
$(".typeahead").typeahead({
name : 'resultArticle',
remote : {
url: '/ajax/articles?query=%QUERY',
filter: function(data) {
var resultList = data.aaData.map(function (item) {
return item.name;
});
return process(resultList);
}
}
});
The call to the json is ok, but there is no return, I have no idea what I can do to debug/find solution.
对 json 的调用没问题，但没有返回，我不知道我能做些什么来调试/找到解决方案。
Thanks!
谢谢！
回答by Bass Jobsen
In the first place you could consider to use https://github.com/bassjobsen/Bootstrap-3-Typeahead.
首先，您可以考虑使用https://github.com/bassjobsen/Bootstrap-3-Typeahead。
You should check if your resultListor the result of process(resultList)has the format of:
您应该检查您的resultList或结果是否process(resultList)具有以下格式：
The individual units that compose datasets are called datums. The canonical form of a datum is an object with a value property and a tokens property. value is the string that represents the underlying value of the datum and tokens is a collection of single-word strings that aid typeahead.js in matching datums with a given query.
组成数据集的各个单元称为数据。数据的规范形式是具有值属性和标记属性的对象。value 是表示数据底层值的字符串，tokens 是单字字符串的集合，帮助 typeahead.js 将数据与给定查询匹配。
To mimic your /ajax/articles?queryi use:
模仿你的/ajax/articles?query我使用：
<?php
class names
{
var $name;
function __construct($name)
{
$this->name = $name;
}
}
$data=array();
$data['aaData'] = array();
foreach (array('kiki','dries','wolf') as $name)
{
$data['aaData'][] = new names($name);
}
echo json_encode($data);
exit;
This endpoint always return a list of three names independent of the query. This list should show in the dropdown.
此端点始终返回与查询无关的三个名称的列表。此列表应显示在下拉列表中。
Your (adopted) js code:
您的（采用的）js 代码：
$(".typeahead").typeahead({
name : 'resultArticle',
remote : {
url: 'search.php?query=%QUERY',
filter: function(data) {
var resultList = data.aaData.map(function (item) {
return item.name;
});
console.log(resultList);
return resultList;
},
}
});
When i run this console.log(resultList);gives ["kiki", "dries", "wolf"]. An array of string which fit the data format.
The typeahead dropdown also show these name. (don't forget to include the CSS from: https://github.com/jharding/typeahead.js-bootstrap.csshttps://github.com/bassjobsen/typeahead.js-bootstrap-css)
当我运行这console.log(resultList);给["kiki", "dries", "wolf"]. 符合数据格式的字符串数组。typeahead 下拉菜单也显示这些名称。（不要忘记包含来自：https: //github.com/jharding/typeahead.js-bootstrap.csshttps://github.com/bassjobsen/typeahead.js-bootstrap-css的 CSS ）
Note you don't need your return process(resultList);
请注意，您不需要您的return process(resultList);
