Twitter TypeAhead.js不更新输入 [英] Twitter TypeAhead.js not updating input

问题描述

我在bootstrap 3项目上使用了 Twitter的TypeAhead.js 库.看起来很棒，但是我在输入领域遇到了麻烦.一旦我开始填写，就会提前输入，并相应地显示建议框.但是，选择任何条目后，输入字段将完全不被填写.有人可以帮我吗?

I am using the Twitter's TypeAhead.js library on my bootstrap 3 project. It seems to be excellent, however,I am having troubles with my input field. As soon as I start to fill that, the typeahead is fired and the suggestion box appears accordingly. However,after select any of the entries, the input field is not filled at all. Can someone help me, please?

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

Here's the code I'm working now:

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()函数上.波纹管是该功能的书面代码.

Thanks to @bass-jobsen, I have been able to deploy that. The secret, as stated by him, is on the filter() function, provided by TypeAhead. Bellow is the written code for such function.

...

 $('#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属性).

Your data set don't have a value property (also the tokens property is missing).

从文档中

组成数据集的各个单位称为基准.这 基准的规范形式是具有 value 属性和 令牌属性.值是代表基础的字符串 数据和标记的值是单个单词字符串的集合 有助于typeahead.js与给定查询匹配数据.

The individual units that compose datasets are called datums. The canonical form of a datum is an object with a value property and a tokens property. value is the string that represents the underlying value of the datum and tokens is a collection of single-word strings that aid typeahead.js in matching datums with a given query.

另请参阅 http://上的"Twitter的开源项目"示例. twitter.github.io/typeahead.js/examples/.此处的json返回是一个对象数组，例如:

Also take a look at the "Open Source Projects by Twitter" example on http://twitter.github.io/typeahead.js/examples/. The json return here is an array of objects like:

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

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

If you can't change your JSON response you can use the filter option of remote to construct valid data:

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

这篇关于Twitter TypeAhead.js不更新输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！