[英]Twitter TypeAhead.js not updating input
我在bootstrap 3项目中使用Twitter的TypeAhead.js库。 看来很棒,但是我在输入领域遇到了麻烦。 一旦我开始填写,就会提前输入,并相应地显示建议框。 但是,选择任何条目后,输入字段将完全不填写。 有人能帮助我吗?
这是我现在正在使用的代码:
HTML:
<input type="text" class="form-control typeahead" name="txtCliente" id="txtCliente" placeholder="Cliente ou Aterro de Destino" value="" maxlength="100" required>
Javascript代码-激活字段:
$('.typeahead').typeahead({
name: 'parceiro',
remote: '../api/index.php/parceiro/busca/%QUERY',
template: [
'<p>{{RAZAO_SOCIAL}}</p>',
'<p>{{DESCRICAO_TIPOPARCEIRO}}</p>',
'<p>{{CNPJ}}</p>'
].join(''),
engine: Hogan
});
最后,从服务器返回的JSON:
[{
"ID":"17",
"TIPOPARCEIRO":"C",
"DESCRICAO_TIPOPARCEIRO":"CLIENTE",
"RAZAO_SOCIAL":"VINICIUS SOARES BATISTA",
"CNPJ":"12344123213123"
}]
提前致谢!
[编辑]
感谢@ bass-jobsen,我已经能够部署它。 正如他所说,秘密在TypeAhead提供的filter()函数上。 波纹管是该功能的书面代码。
...
$('#txtCliente').typeahead({
header: '<b>Clientes</b>',
template: [
'<span>{{RAZAO_SOCIAL}}<BR>{{CNPJ}}</span>',
].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属性)。
从文档:
组成数据集的各个单位称为基准。 基准的规范形式是具有值属性和令牌属性的对象。 value是表示基准的基础值的字符串,token是单字字符串的集合,这些字符串有助于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: [
'<p>{{RAZAO_SOCIAL}}</p>',
'<p>{{DESCRICAO_TIPOPARCEIRO}}</p>',
'<p>{{CNPJ}}</p>'
].join(''),
filter: 'testfilter',
engine: Hogan
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.