Twitter TypeAhead.js不更新输入

Twitter TypeAhead.js not updating input

本文关键字：更新 输入 js TypeAhead Twitter      更新时间：2023-09-26

我在我的bootstrap 3项目中使用了Twitter的TypeAhead.js库。这似乎很棒，但是，我的输入字段遇到了问题。一旦我开始填写它，就会触发 typeahead 并相应地出现建议框。但是，选择任何条目后，输入字段根本不填充。请问有人可以帮我吗？

这是我现在正在处理的代码：

.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工作，我才能部署它。正如他所说，这个秘密在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
})

。

数据集没有值属性（令牌属性也丢失）。

从文档中：

组成数据集的各个单元称为基准面。这 基准面的规范形式是具有值属性和 令牌属性。值是表示基础的字符串 基准面和标记的值是单字字符串的集合 这有助于提前输入.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 的筛选器选项来构造有效数据：

$('.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                                                                 
});
相关文章：