Twitter Typeahead различает события

Question

Я разрабатываю систему, которая позволяет пользователям аннотировать элементы с помощью строк или терминов из словаря. Я использую тип Twitter для автозаполнения и хочу различать введенную строку и термин.

Я не могу понять, как различать следующие ситуации:

1. пользователь, нажав клавишу ВВОД после подходя со своим собственным значением
2. пользователя нажатием вниз (или вверх) стрелки (тем самым выбирая опцию автозавершения) и нажимая клавишу ВВОД

слушателей событий я написал:

$("#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> 

Первым слушатель улавливает все выбранные условия машинописных, что позволяет должным образом экономии срока. Проблема в том, что второй прослушиватель также запускается, если пользователь нажимает и вводит, выбирая термин typeahead, который теперь также сохраняется как простая строка. Есть ли способ не запускать второй прослушиватель в случае выбора типа head?

скрипка с кодом нагруженным: https://jsfiddle.net/zban3vs6/1/

Edit: Я рассмотрел ряд взломов, но все приходят со своими проблемами:

1. Добавить специальный символ в строку, показанной на входе в момент его выбора, добавив пользовательский дисплей Typeahead: https://jsfiddle.net/2t9rzhwf/ Это вызывает появление дополнительного символа, что является затруднительным, если пользователь нажимает стрелку вниз, не нажимая кнопку enter.

2. Попытка упорядочить слушателей, сначала вызвать триггер слушателя, установить логическое значение в true и фильтровать на этом булевом во втором слушателе. Не нравится этот способ фильтрации, поскольку он вводит задержку.

3. Решение, предоставляемое директивой @ peter-clause, проверяя, находится ли выбранное значение в списке доступных элементов. Но таким образом я не могу отслеживать, должен ли пользователь использовать опцию автозаполнения для выбора термина или явно, добавляет простую строку.

Answer 1

У меня была аналогичная проблема. Вот как я это решил.

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

Answer 2

Довольно хакерское решение, но вы можете проверить, находится ли выбранное значение в списке доступных элементов.

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

См https://jsfiddle.net/zban3vs6/2/