當我從下拉列表中選擇一個選項時，jQuery typeahead停止工作

Question

我正在使用jQuery typeahead來做起初很完美的自動完成功能，但是當我從列表中選擇一個選項然后嘗試再次使用它（通過輸入內容）時，它根本不會再顯示結果。

當我選擇一個選項時，看起來像提前被破壞了。

更新＃1

我為您創建了一個jsfiddle以便能夠查看發生了什么，您可以在輸入中鍵入“某人”以獲取自動完成的數據： http : //jsfiddle.net/cristiangrojas/rhtd9o8k/3/

var Opportunities = new Bloodhound({
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(
      '{id} {name} {identification} {email} {vehicle_registration}'.assign({
        "id": d["id"],
        "name": d["name"],
        "identification": d["identification"],
        "email": d["email"],
        "vehicle_registration": d["vehicle_registration"]
      })
    );
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: opportunities
});

Opportunities.initialize();

$('input[name="opportunities_search"]').typeahead({
  hint: true,
  highlight: true,
  minLenght: 1
}, {
  name: 'oportunidades',
  displayKey: 'id',
  source: Opportunities.ttAdapter(),
  templates: {
    empty: [
      '<div class="empty-message">',
      'No se encontró ninguna oportunidad',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile(
        '<p>' +
        'Opp #{{ id }}' +
        '<br>' +
        '{{ name }}' +
        '<br>' +
        'CC: {{ identification }}' +
        '<br>' +
        'email: {{ email }}' +
        '<br>' +
        'Placa: {{ vehicle_registration }}' +
        '</p>'
    )
  }
});

Answer 1

從文檔：

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

displayKey –對於給定的建議對象，確定其字符串表示形式。 選擇建議后，在設置輸入控件的值時將使用此選項。 可以是鍵字符串，也可以是將建議對象轉換為字符串的函數。 默認值

您正在使用鍵字符串'id'，但是id的json數據不是字符串，而是一個數字。 因此，要么更改json數據以將id作為字符串，要么使用函數將id作為字符串返回，如下所示：

displayKey: function(d){return d.id+'';},

http://jsfiddle.net/rhtd9o8k/19/

其中d是返回的建議對象，並將空字符串附加到id屬性是將數字強制轉換為javascript中的字符串的一種簡便方法。