Twitter TypeAhead.js not updating input

Question

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 code - to activate the field:

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

And finally, the JSON returned from server:

[{
    "ID":"17",
    "TIPOPARCEIRO":"C",
    "DESCRICAO_TIPOPARCEIRO":"CLIENTE",
    "RAZAO_SOCIAL":"VINICIUS SOARES BATISTA",
    "CNPJ":"12344123213123"
}]

Thanks in advance!

[EDIT]

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
})

...

Answer 1

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

From the docs:

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.

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"
    ]
  }

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                                                                 
});