使用 typeahead，如何将匹配的用户键入的输入视为匹配？

Question

我正在为使用Twitter Typeahead（和Blood -Hound）和JQuery的WordPress插件项目做出贡献。

插件包含有关组织组的信息。当用户输入希望添加到数据库的组名称时，Typeahead/Bloodhound会根据现有组提供建议（弹出）。如果用户从弹出窗口中的建议中选择了使用鼠标或箭头键的现有组，或者在显示所需的自动完成组名称时按下选项卡该组是从数据库中填充的。这是有效的所需行为。

如果用户在新组名称中键入（Typeahead/Bloodhound找不到匹配），则使用用户输入的组名和其他信息来创建数据库中的新组。这部分也有效。

当用户键入现有组的名称时，就会发生问题，而不是从自动完成/弹出建议中选择组，而是继续键入整个组名称，然后按下或单击"下一个字段。当用户执行此操作时，与组相关的数据不会自动填充。

来自JS文件：

$('input#group').typeahead(null, {
        displayKey: 'value',
        source: array_of_groups
    }).on('typeahead:autocompleted typeahead:selected', function($e, group){
        $('input[name=website]').val(group.website);
        $('input[name=email]').val(group.email);
        $('input[name=phone]').val(group.phone);
});

我已经阅读了Typeahead文档，但是我没有看到（或理解？）任何选项或自定义事件，可以让我更改图书馆的行为，当autocomplete建议的所有字母都有已经由用户输入。我也没有看到一种让打字机/猎犬进行最终检查的方法，以查看输入字符串是否与源中的任何现有值匹配。

我发现了一个类似的问题（在使用Typeahead时，在Onblur事件中选择值），我认为基本上涉及再次通过数据源循环寻找匹配。我也许可以实施这样的东西，但是我正在寻找与打字机/猎犬更加紧密整合的解决方案。

我发现的另一个建议会在模糊上注入击键（即，tab），但是正如我在上面指出的那样，在输入整个名称后的标签似乎并没有触发该函数。我也确定那会触发打字机自定义事件。

这是模仿项目相关部分的代码JSFIDDLE。我在此提取中了解到，如果用户在不匹配确切情况的情况下键入组名称，则TAB实际上将抓住正确的建议作为匹配。问题仍然存在，但是如果用户键入组的确切名称和命中选项卡（或单击鼠标到下一个字段）打字匹配。

我将仔细研究一下是否有一种使用模板和功能组合的方法，但欢迎建议。

Answer 1

研究了Twitter Typeahead文档后，我发现了自定义事件，称为 typeahead：change ：

打字：更改 - 本机更改事件的归一化版本。 当输入失去焦点时被解雇，并且价值自此发生了变化 最初收到的重点。

使用此信息，我创建了两个事件，一个用于丢失的焦点情况，另一个是建议。

。

var myTypeahead = $('input#group').typeahead({
  minLength: 0,
  hint: true
}, {
  displayKey: 'gname',
  source: groups.ttAdapter()
});
myTypeahead.on('typeahead:change', function($e, group) {
  $.each(groupData, function() {
    if (this["gname"].toUpperCase() === group.toUpperCase()) {
        console.log("Match!");
      $('input[name=website]').val(this.gwebsite);
      $('input[name=notes]').val(this.gname);
    }
  });
});
myTypeahead.on('typeahead:autocompleted typeahead:selected', function($e, group) {
  //  myTypeahead.off('typeahead:change');
  $('input[name=website]').val(group.gwebsite);
  $('input[name=notes]').val(group.gname);
});

这是修订后的JSFIDDLE。