Question

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

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

如果用户键入新的组名（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进行最终检查以查看输入字符串是否与源中任何现有值匹配的方法。

我发现了一个类似的问题（Select value during onblur event when using typeahead），我认为这个问题主要涉及在数据源中循环寻找匹配。我可能能够实现这样的东西，但我正在寻找一种与Typeahead / Bloodhound更紧密集成的解决方案。

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

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

我将仔细研究是否有办法使用模板和功能的组合，但欢迎提出建议。

Answer 1

在研究了Twitter Typeahead文档后，我发现名为 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。

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

1 个答案: