wordpress - (jQuery Autocomplete) Disable keyboard commands? -
i'm building custom jquery-ui autocomplete wordpress. entering searchterm (in input id="s")lists suggestions, sorted/filed under categories , clicking on list-item, links respective page. (the page loaded via .load)
so far works, autocomplete has built-in keyboard function. need remove keyboard functionalities. default, pressing up/down-arrow keys, previous/next list-item focused , input field gets value of focused list-item.
for example: entering "searchterm" give list: suggestion-item 1 suggestion-item 2 suggestion-item 3 suggestion-item 4 pressing down-key replace "searchterm" "suggestion-item-1", etc. pressing enter select focused item , close menu.
can me on how remove these keyboard-functionalities (see on jquery autocomple -> keyboard interactions)?
basically want take user own search-results page entered "searchterm", if enter pressed. default behaviour of search-input.
here's js:
(function( $ ) { $(function() { // modify autocomplete structure $.widget( "ui.autocomplete", $.ui.autocomplete, { // how 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'>" + "[ # " + item.number + " ]" + "</h2>" + "<a href='" + item.link + "' rel='bookmark'>" + "<h2 class='project-title col2'>" + "[ # " + item.label + " ]" + "</h2>" + "</a>" + "</header>" + "</article>") .appendto( ul ); }, // how render list _rendermenu: function( ul, items ) { var = 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 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 '; // } }, // page transition on "selected" item select: function (event, ui) { history.pushstate({}, '', ui.item.link); console.log(ui.item.link); acajaxload(ui.item.link); } }); }); }); })( jquery );
thanks!
Comments
Post a Comment