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

Question

我正在为一个使用 Twitter Typeahead（和 Bloodhound）和 JQuery 的 Wordpress 插件项目做贡献。

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

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

当用户键入现有组的名称时出现问题，但用户没有从 autocompleted/popup 建议中选择组，而是继续键入整个组名称，然后按 Tab 键或单击将鼠标放在下一个字段上。当用户这样做时，与组相关的数据不会自动填充。

来自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 文档，但我没有看到（或理解？）任何选项或自定义事件可以让我更改库在自动完成的所有字母时如何处理选项卡的行为用户已经输入了建议。我也没有找到让 Typeahead/Bloodhound 进行最终检查以查看输入字符串是否与源中的任何现有值匹配的方法。

我发现了一个类似的问题 ()，我认为它基本上涉及再次遍历数据源以寻找匹配项。我也许能够实现类似的东西，但我正在寻找与 Typeahead/Bloodhound 更紧密集成的解决方案。

我发现的另一个建议是在 blur 上注入击键（即制表符），但正如我在上面指出的那样，在输入整个名称后按制表符似乎不会触发该功能。我也不确定这会触发 Typeahead 自定义事件。

这里是模仿项目相关部分的代码 jsfiddle。我在这个提取中了解到，如果用户键入组名而不匹配确切的大小写，选项卡实际上会抓取正确的建议作为匹配项。问题仍然存在，但如果用户键入组的确切名称并点击选项卡（或单击鼠标到下一个字段），则不会触发预先匹配。

我会仔细看看是否有办法结合使用模板和函数，但欢迎提出建议。

Answer 1

在研究了 Twitter Typeahead 文档后，我发现了名为 typeahead:change:

的自定义事件

typeahead:change – Normalized version of the native change event. Fired when input loses focus and the value has changed since it originally received focus.

使用它，我创建了两个事件，一个用于失去焦点的情况，另一个用于选择建议。

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.

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

Using typeahead, how have user's typed input that matches be seen as a match?

javascript

jquery

typeahead.js