Я создаю пользовательский 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'>" + "[ # " + item.number + " ]" + "</h2>" +
"<a href='" + item.link + "' rel='bookmark'>" +
"<h2 class='project-title col2'>" + "[ # " + item.label + " ]" + "</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();
}
});
event.preventDefault();
, что препятствует обновлению поля ввода. Но (любопытно?) Добавляет метку сфокусированного элемента в<span class="ui-helper-hidden-accessible">
перед полем ввода. Я бы просто удалил этот<span>
, но он мне нужен, так как он также содержит информацию о том, сколько результатов найдено.