(jQuery Autocomplete) Отключить команды клавиатуры?

0

Я создаю пользовательский jQuery-ui автозаполнение для Wordpress. Ввод поискового запроса (во входном id = "s") перечисляет все предложения, отсортированные/поданные под категориями и нажав на элемент списка, ссылки на соответствующую страницу. (Страница будет загружена через.load)

Пока все работает, но автозаполнение имеет встроенную функцию клавиатуры. Мне нужно будет удалить все функциональные возможности клавиатуры. По умолчанию, нажав клавиши со стрелками вверх/вниз, предыдущий/следующий список будет сфокусирован, а поле ввода получает значение сфокусированного списка.

For example:
Entering "searchterm" could give the list:
   Suggestion-item 1
   Suggestion-item 2
   Suggestion-item 3
   Suggestion-item 4

Pressing the down-key will replace "searchterm" with "Suggestion-item-1", etc.
Pressing Enter would select the currently focused item and close the menu.

Может ли кто-нибудь помочь мне в том, как удалить все эти функциональные возможности клавиатуры (см. Раздел jQuery Autocomple → Keyboard Interactions)?

В основном, я хочу, чтобы пользователь перешел на собственную страницу результатов поиска с первоначально введенным "searchterm", если нажать Enter. Каким будет поведение по умолчанию для поиска.

Здесь мои js:

(function( $ ) {
  $(function() {

    // Modify Autocomplete structure
    $.widget( "ui.autocomplete", $.ui.autocomplete, {

        // How to render items
        _renderItem: function( ul, item ) {
            return $( "<li>" )
            //.append( "<div style='display: inline-block; width: 100px;'>" + item.number + "</div><div style='display: inline-block; width: 600px;'>" + item.label + "</div>" )
            .append(    "<article class='project' role='article'>" +  
                        "<header class='project-header'>" + 
                        "<h2 class='project-number col1'>" + "[&thinsp;#&thinsp;" + item.number + "&thinsp;]" + "</h2>" +
                        "<a href='" + item.link + "' rel='bookmark'>" + 
                        "<h2 class='project-title col2'>" + "[&thinsp;#&thinsp;" + item.label + "&thinsp;]" + "</h2>" +                         
                        "</a>" + 
                        "</header>" + 
                        "</article>")
            .appendTo( ul );
        },

        // How to render list
        _renderMenu: function( ul, items ) {
            var that = this;
            var currentTag = "";
            $.each( items, function( index, item ) {
                var li;
                if(item.tag != currentTag) {
                    ul.append(  "<li class='acsearch-tag'>" + 
                                "<h2 class='col2'>" + item.tag + "</h2>" +
                                "</li>");
                    currentTag = item.tag;
                }
                li = that._renderItemData( ul, item );
                if(item.tag) {
                    li;
                }
            });
        }

    });

    var url = MyAutocomplete.url + "?action=my_search";
    // Bind autocomplete to any future instances
    $(document).on('focus', '#s:not(ui-autocomplete-input)', function(event) {
        // Autocomplete function
        $(this).autocomplete({
            appendTo: '#acsearchlist',
            position: { my:'left top', at:'left top', of:'#acsearchlist' },
            source: url,
            delay: 100,
            minLength: 3,
            response: function( event, ui ) {
                console.log(ui);
            },
            open: function( event, ui ) {
                $('#list').hide();
                $('.ui-autocomplete').css('width', '100%');
            },
            close: function( event, ui ) {
                $('#list').show();
            },
            focus: function( event, ui ) {
                event.preventDefault();
            },
            messages : {
                noResults : "",
                results : ""
                // function(count) {
                //  return count + (count > 1 ? ' recordings' : ' recording ') + ' found for ';
                // }
            },
            // Page transition on "selected" item
            select: function (event, ui) {
                history.pushState({}, '', ui.item.link);
                console.log(ui.item.link);
                acAjaxLoad(ui.item.link);
            }
        });     
    });
  });
})( jQuery );

Благодарю!

  • 0
    Итак, чтобы уточнить, вы не хотите, чтобы поведение jQuery UI нажатия вводило только заполнение формы, а не ее отправку?
  • 0
    Да, в основном, я хочу, чтобы нажатие Enter только отправляло форму (как это можно сделать без autocomplete-ui). Кроме того, я попытался установить событие 'focus' для .autocomplete в event.preventDefault(); , что препятствует обновлению поля ввода. Но (любопытно?) Добавляет метку сфокусированного элемента в <span class="ui-helper-hidden-accessible"> перед полем ввода. Я бы просто удалил этот <span> , но он мне нужен, так как он также содержит информацию о том, сколько результатов найдено.
Показать ещё 1 комментарий
Теги:
autocomplete
keyboard-events

1 ответ

0

За то, что он стоит 3 года спустя. Это означает, что входной сигнал не получает новое значение:

$('#input').autocomplete({
focus: function( event, ui ) {
  // Stop the autocomplete of resetting the value to the selected one
  event.preventDefault();
}

});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню