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 })
…
您的数据集没有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 });