tag-it: функция для выбора в автозаполнении не работает

Question

Я использую плагин tag-it для ввода тегов от пользователя. Источник тега для автозаполнения используется через вызов ajax, который возвращает объекты json, с помощью которых я сопоставляю значения и имена тегов для отображения пользователю. Объект json также содержит идентификатор для каждого из тегов, который я не хочу показывать пользователю, но отправляю на сервер вместо метки/значения тега. Для этого я думал, что могу использовать функцию под опцией «выбрать», обычно доступную в автозаполнении. Эта функция будет поддерживать массив всех идентификаторов, выбранных пользователем. Но функция select просто не вызывается, когда я выбираю тег. Используемый мной код выглядит следующим образом:

$("#myTags").tagit({ 
     allowSpaces: true, 
     autocomplete: { 
      source: function (request, response) { 
       $.ajax({ 
        url: "http://localhost:5555/api/Tag", 
        dataType: "json", 
        data: { 
         strSearch: request.term 
        }, 
        success: function (data) { 
         response($.map(data, function (item) { 
          return { 
           label: item.Name, //Use rest of the data to map IDs 
           value: item.Name, 
           ID: item.ID 
          } 
         })); 
        } 
       }); 
      }, 
      minLength: 1, 
      select: function (event, ui) { 
       console.log(ui.item.label + "=" + ui.item.ID); 
      } 

     } 

    }); 

Answer 1

Для меня выбор не работает при использовании клавиш ВВЕРХ/ВНИЗ и ENTER. Работал с мышью и вкладкой.

Я пробовал код обнаружения ключа, как это было предложено в другом посте (если ключ == 13), но никто не работал для меня.

Мое решение состояло в том, чтобы поставить фокусное событие, где временно храню последний объект с фокусом. Затем, когда пользователь нажимает клавишу ввода или кликает мышью, я проверяю, совпадает ли набранная метка с последней меткой метки. Это тот же эффект, что и если бы метка была выбрана:

// Variable used to store temporarily the focused label from 
// the autocomplete list. 
var focusedTag = null; 

$('#tags-list').tagit({ 

    fieldName: 'tags', 

    autocomplete: { 

     source: function (request, response) { /* Load your list... */ }, 

     // Stored the tag that received focus temporarily, to solve 
     // enter key problem. 
     focus: function(event, ui) { 
      focusedTag = ui.item; 
     }, 

     delay: 100, 
     minLength: 3 
    }, 

    afterTagAdded: function (event, ui) { 

     if (focusedTag !== null && 
       focusedTag.label === ui.tagLabel) { 
      // Same as if it was selected... 
     } 

     focusedTag = null; 

    }, 

    allowSpaces: true 
}); 

Cheers.