当我从下拉列表中选择一个选项时，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中的字符串的一种简便方法。