【发布时间】：2015-04-12 20:04:14
【问题描述】：
我正在尝试使用 typeahead，特别是 typeahead for Bootstrap 3，以便允许用户搜索数据库中的某些内容：
查询结果如下：
[{"id":1,"name":"Viajes Alaniz-Santiago","contact_name":"Carlota Pab\u00f3n","email":"ona22@rosaesteve.es"},{"id":9,"name":"Rodrigo y Alcaraz y Asoc.","contact_name":"Yago Calder\u00f3n","email":"pablo.cuellar@toro.es"},{"id":18,"name":"Global Carbajal","contact_name":"Joel Verduzco","email":"pablo.lucio@santana.es"},{"id":19,"name":"Ocasio de Ni\u00f1o y Flia.","contact_name":"Carlos Ocasio","email":"wposada@global.es"},{"id":24,"name":"Valles y Jaramillo S. de H.","contact_name":"Sra. Carolina P\u00e1ez","email":"plaza.erika@herrero.com.es"},{"id":32,"name":"Centro Est\u00e9vez-Caraballo","contact_name":"Alejandra Marroqu\u00edn","email":"ybravo@espinal.com.es"},{"id":43,"name":"Asociaci\u00f3n Olivas-Carbajal","contact_name":"Angela Anaya","email":"noa63@puig.com"}]
因此，当用户输入QUERY 数据库时，它实际上是在查找表中的name 和contact_name 字段。例如，在上面的示例中，Car 是查询，因此包含contact_name 中的结果 Carlota Pabón。
我是这样设置 Bloodhound 的提前输入的：
var engine = new Bloodhound({
name: 'contact_name',
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name','contact_name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '/search/providers?query=%QUERY'
});
engine.initialize();
$("#providersSearchInput").typeahead({
source: engine.ttAdapter(),
minLength: 3,
items: 15,
});
我认为 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name','contact_name') 会成功 as this answer suggests 但它不起作用。
我应该如何设置它？以及如何获得selected object，也就是我在contact_name 中也实现了显示匹配并且用户选择了Carlota Pabón，我想获得{"id":1,"name":"Viajes Alaniz-Santiago","contact_name":"Carlota Pab\u00f3n","email":"ona22@rosaesteve.es"} 作为选定对象。
编辑，我也试过了：
没有更多的数据没有用：
var name = new Bloodhound({
datumTokenizer: function (data) {
return Bloodhound.tokenizers.whitespace(data.name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '/search/providers?query=%QUERY'
});
var contact_name = new Bloodhound({
datumTokenizer: function (data) {
return Bloodhound.tokenizers.whitespace(data.contact_name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: '/search/providers?query=%QUERY'
});
name.initialize(); contact_name.initialize();
$("#providersSearchInput").typeahead({
source: name.ttAdapter(),
minLength: 3,
items: 15,
},
{
source: contact_name.ttAdapter(),
minLength: 3,
items: 15
});
【问题讨论】：
标签： jquery html typeahead.js