[英]Bootstrap 3 with Typeahead JSON remote
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.9.3.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! 谢谢!
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 resultList
or 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属性和tokens属性的对象。 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是表示基准的基础值的字符串,标记是单字符串的集合,用于帮助匹配基准中的typeahead.js与给定查询。
To mimic your /ajax/articles?query
i 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);
当我运行这个console.log(resultList);
gives ["kiki", "dries", "wolf"]
. 给["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.css
https://github.com/bassjobsen/typeahead.js-bootstrap-css ) (不要忘记包括CSS:
https
:
//github.com/jharding/typeahead.js-bootstrap.css
https://github.com/bassjobsen/typeahead.js-bootstrap-css )
Note you don't need your return process(resultList);
请注意,您不需要return process(resultList);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.