Twitter Typeahead 区分事件

Question

我正在设计一个系统，允许用户使用字符串或词汇表中的术语来注释元素。我使用 Twitter typeahead 进行自动完成，想区分输入的字符串和术语。

我不知道如何区分以下情况：

用户在得出自己的值后按回车键
用户按向下（或向上）箭头（从而 select 自动完成选项）并按 enter

我写的事件监听器：

$("#itemInp").on('typeahead:select', function(event, term) {
    console.log("save: term", term);
});

$("#itemInp").on('keyup', function(event) {
    if(event.which == 13) {
        var string = $("#itemInp").val();
        console.log("save: string", string);
    }
});

与以下HTML:

<input id="itemInp"><input>

第一个侦听器捕获所有 selected typeahead 术语，允许正确保存术语。问题是，如果用户按下并输入 select 预先输入的术语，第二个侦听器也会被触发，该术语现在也被保存为纯字符串。有没有办法在 selected 时不触发第二个侦听器？

A fiddle 加载了代码： https://jsfiddle.net/zban3vs6/1/

编辑：我考虑了一些技巧，但都有自己的问题：

在 selected 时向输入中显示的字符串添加一个特殊字符，方法是添加自定义 Typeahead 显示：https://jsfiddle.net/2t9rzhwf/ 这会导致引入一个额外的字符，如果用户在没有按回车键的情况下按下向下箭头，这会很麻烦。
尝试对侦听器进行排序，首先触发术语侦听器，将布尔值设置为 true，然后在第二个侦听器中过滤此布尔值。不喜欢这种过滤方式，因为它引入了延迟。
@peter-clause提供的解决方案，检查selected值是否在可用项列表中。但是这样我就无法跟踪用户是打算使用自动完成选项来 select 一个术语还是明确地添加一个纯字符串。

Answer 1

一个相当复杂的解决方案，但您可以检查所选值是否在可用项目列表中。

if (states.indexOf(string) == -1) {
    //...
}

见https://jsfiddle.net/zban3vs6/2/

Answer 2

我遇到了类似的问题。我就是这样解决的。

    var wasSelected = false;
    $("#itemInp").on('typeahead:select', function(event, term) {
        wasSelected = true;
        console.log("save: term", term);
    });

    $("#itemInp").on('change', function(event) {
        if(!wasSelected) {
            var string = $("#itemInp").val();
            console.log("save: string", string);
        }
        wasSelected = false;    
    });

Twitter Typeahead 区分事件

Twitter Typeahead differentiate between events

javascript

jquery

twitter-typeahead