0

ブートストラップ 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
})

...

4

1 に答える 1

3

データ セットに value プロパティがありません (tokens プロパティもありません)。

ドキュメントから：

データセットを構成する個々の単位はデータムと呼ばれます。データムの標準形式は、 valueプロパティと tokens プロパティを持つオブジェクトです。value はデータの基になる値を表す文字列で、tokens は 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 応答を変更できない場合は、リモートのフィルター オプションを使用して有効なデータを作成できます。

$('.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                                                                 
});
于 2013-10-17T17:56:11.813 に答える