Twitter TypeAhead.js没有更新输入

Question

我在我的bootstrap 3项目中使用Twitter's 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" 
}] 

在此先感谢！

[编辑]

感谢@低音jobsen，我已经能够部署。如他所述，秘密在于由TypeAhead提供的过滤器（）函数。贝娄是这种功能的书面代码。

...

$('#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 
}) 

...

Answer 1

你的数据集不具有值属性（也令牌属性缺失）。

从文档：

了组成数据集上的各个单元被称为基准。基准的 规范形式是具有值属性和 令牌属性的对象。值是代表基准值 的字符串，令牌是单字符串 的集合，可帮助typeahead.js将基准与给定查询进行匹配。

另请参阅http://twitter.github.io/typeahead.js/examples/上的“开源项目推特”示例。这里的JSON回报就像是对象的数组：

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

如果你不能改变你的JSON响应，您可以使用遥控器的过滤选项，构建有效的数据：

$('.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                 
});