（jQuery Autocomplete）禁用键盘命令？

Posted 2021-03-31

我正在为Wordpress构建自定义jQuery-ui自动完成功能。输入searchterm（输入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 );

谢谢！

答案

3年后的价值。这是为了阻止输入获取新值：

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

});