Twitter TypeAhead.js没有更新输入

我在我的bootstrap 3项目中使用Twitter的TypeAhead.js库。 这看起来很棒，但是我的输入字段很麻烦。 一旦我开始填写，就会触发预先输入并相应地显示建议框。 但是，在选择任何条目后，输入字段根本不会被填充。 有谁可以帮助我吗？

这是我现在正在使用的代码：

HTML：

Javascript代码 – 激活字段：

 $('.typeahead').typeahead({ name: 'parceiro', remote: '../api/index.php/parceiro/busca/%QUERY', template: [ '
{{RAZAO_SOCIAL}}
', '
{{DESCRICAO_TIPOPARCEIRO}}
', '
{{CNPJ}}
' ].join(''), engine: Hogan }); 

最后，从服务器返回的JSON：

 [{ "ID":"17", "TIPOPARCEIRO":"C", "DESCRICAO_TIPOPARCEIRO":"CLIENTE", "RAZAO_SOCIAL":"VINICIUS SOARES BATISTA", "CNPJ":"12344123213123" }] 

提前致谢！

[编辑]

感谢@ bass-jobsen，我已经能够部署它了。 正如他所说，秘密在于TypeAhead提供的filter（）函数。 贝娄是这种function的书面代码。

…

  $('#txtCliente').typeahead({ header: 'Clientes', template: [ '{{RAZAO_SOCIAL}}
{{CNPJ}}', ].join(''), limit: 3, remote: { url: '../api/index.php/parceiro/busca/%QUERY', filter: function(parsedResponse) { var dataset = []; for(i = 0; i < parsedResponse.length; i++) { if(parsedResponse[i].TIPOPARCEIRO == "C" || parsedResponse[i].TIPOPARCEIRO == "A"){ dataset.push({ ID: parsedResponse[i].ID, RAZAO_SOCIAL: parsedResponse[i].RAZAO_SOCIAL, DESCRICAO_TIPOPARCEIRO: parsedResponse[i].DESCRICAO_TIPOPARCEIRO, CNPJ: parsedResponse[i].CNPJ, value: parsedResponse[i].RAZAO_SOCIAL }); } } return dataset; }, }, engine: Hogan }) 

…

Answer 1

您的数据集没有value属性（也缺少tokens属性）。

来自文档：

组成数据集的各个单元称为基准。 规范forms的数据是具有value属性和tokens属性的对象。 value是表示基准的基础值的字符串，标记是单字符串的集合，用于帮助匹配基准的typeahead.js与给定的查询。

另请参阅http://twitter.github.io/typeahead.js/examples/上的“Twitter上的开源项目”示例。 这里的json返回是一个对象数组，如：

  { "name": "typeahead.js", "description": "A fast and fully-featured autocomplete library", "language": "JavaScript", "value": "typeahead.js", "tokens": [ "typeahead.js", "JavaScript" ] } 

如果您无法更改JSON响应，则可以使用remote的filter选项来构造有效数据：

 $('.typeahead').typeahead({ name: 'is', remote: {url:'database2.php?q=%QUERY', filter: function(data){ for (var i = 0; i < data.length; i++) { data[i].value = data[i].RAZAO_SOCIAL; data[i].tokens = new Array(data[i].RAZAO_SOCIAL,data[i].DESCRICAO_TIPOPARCEIRO); } return data;} }, template: [ '
{{RAZAO_SOCIAL}}
', '
{{DESCRICAO_TIPOPARCEIRO}}
', '
{{CNPJ}}
' ].join(''), filter: 'testfilter', engine: Hogan });