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

Question

我正在为一个Wordpress插件项目做出贡献，该项目使用推特字体提前（和猎犬）和JQuery。

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

如果用户键入新的组名（Typefirst/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);
});

我已经读了type前留档，但我没有看到（或理解？）当用户已经输入自动完成建议的所有字母时，任何允许我更改库处理选项卡的行为的选项或自定义事件。我也不认为有办法让Typefirst/Bloodhound做最后一次检查，看看输入字符串是否与源中的任何现有值相匹配。

我发现了一个类似的问题（使用typeahead时在onblur事件期间选择value），我认为这基本上涉及到再次循环数据源以查找匹配项。我可能能够实现类似的东西，但我正在寻找一个与Typeahead/Bloodhound更紧密集成的解决方案。

我发现的另一个建议是在blur上插入一个击键（即tab），但正如我在上面指出的，在键入整个名称后进行tab似乎不会触发该函数。我也不确定这是否会触发Typeahead自定义事件。

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

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

Answer 1

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

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

这是修改后的JSFIDLE。