Javascript 使用typeahead，用户'；是否将匹配的键入输入视为匹配？

我正在参与一个Wordpress插件项目，该项目使用Twitter Typeahead（和猎犬）和JQuery

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

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

当用户键入现有组的名称，但不是从自动完成/弹出建议中选择组，而是继续键入整个组的名称，然后按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上插入一个击键（即tab），但正如我在上面指出的，在键入整个名称后进行tab似乎不会触发该函数。我也不确定这是否会触发Typeahead自定义事件

下面是模拟项目相关部分的代码。我在这篇摘录中了解到，如果用户键入的组名与确切的大小写不匹配，tab实际上会抓住正确的建议作为匹配项。但是，如果用户键入组的确切名称并点击选项卡（或单击鼠标到下一个字段），则不会触发typeahead匹配

我将仔细研究一下是否有一种方法可以将模板和函数结合使用，但欢迎您提出建议

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

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);
});

这是修订版。

在研究文档之后，我发现了名为typeahead:change的定制事件：

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);
});

---

这是修改后的。

您可以将

输入
事件附加到
元素，检查按下的键，如果键是tab键，则调用在HTML中呈现建议的代码。您是指元素的输入事件（onblur）吗？这基本上就是我链接的答案中那个家伙所做的。我将研究这个选项，但我更喜欢使用typeahead.js，而不需要我重新处理所有的组数据，我认为这种方法可以做到。你能在stacksnippets或JSFIDLE.net或plnkr.co上重现这个问题吗？现在正在研究它。没有php，我很难模拟JSFIDLE中的所有行为，因为原始代码在值的输入标记中使用了echo语句。仍在处理中。您可以将
输入
事件附加到
元素，检查按下的键，如果键是tab键，则调用在HTML中呈现建议的代码。您是指元素的输入事件（onblur）吗？这基本上就是我链接的答案中那个家伙所做的。我将研究这个选项，但我更喜欢使用typeahead.js，而不需要我重新处理所有的组数据，我认为这种方法可以做到。你能在stacksnippets或JSFIDLE.net或plnkr.co上重现这个问题吗？现在正在研究它。没有php，我很难模拟JSFIDLE中的所有行为，因为原始代码在值的输入标记中使用了echo语句。还在努力。