javascript - 当我从下拉列表中选择一个选项时，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 – For a given suggestion object, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to value

您正在使用“id”键字符串，但 id 的 json 数据不是字符串，而是数字。因此，要么更改 json 数据以将 id 作为字符串，要么使用函数将 id 作为字符串返回，如以下 fiddle 所示:

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

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

其中 d 是返回的建议对象，将空字符串附加到 id 属性是在 javascript 中将数字转换为字符串的简单方法。