Блог

У меня на моем сайте есть функционирующее окно автозаполнения, которое я хочу использовать как автозаполнение «Тегов» в SO.

Желаемое поведение

После того, как вы увидите выпадающий список предложений, нажатие tab или enter на клавиатуре «принимает» выделенный вариант, добавляет пробел и перемещает фокус в конец строки для ввода следующего тега.

Текущее поведение

После того, как вы получите выпадающий список, нажатие tab или enter заменяет все содержимое текстового поля текущим предложением, а курсор выделяет весь текст (вместо того, чтобы вставлять пробел и указывать на конец строки).

Как я могу добиться такого ответа?

Это мой javascript:

 $(function() { 
$( "#tags-field" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB amp;amp;
                $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
        }
    })
    .autocomplete({
      source: function( request, response ) {
        $.ajax({
            url: "<%= autocomplete_tags_name_questions_url %>",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function( data ) {
                alert("Hi!"),
                response( $.map( data, function( item ) {
                    return {
                        label: item.name, //  (item.adminName1 ? ", "   item.adminName1 : "")   ", "   item.countryName,
                        value: item.name
                    }
                }));
            }
        });
      },
      minLength: 2
  });
});
  

Во-первых, .bind часть вверху, похоже, не работает. Как мне согласовать код здесь с кодом выше?

Ознакомьтесь с демонстрацией нескольких значений.