JQuery ui автозаполнение, когда пользователь не выбирает вариант из выпадающего списка
При использовании jquery autocomplete plugin, что вы делаете, когда пользователь не выбирает элемент в списке, а вместо этого вводит действительный значения и вкладки?
например, когда список автозаполнения содержит:
Cat
Dog
Fish
И пользователь вводит cat, но не выбирает cat из раскрывающегося списка автозаполнения и вместо этого уходит. Поскольку они не выбрали какой-либо элемент из списка, событие выбора автозаполнения не срабатывает, и мы теряем возможность ответить на него:
$('#Animal').autocomplete({
source: url,
minlength: 1,
select: function (event, ui) {
$("#Animal").val(ui.item.value);
changeUsersAnimal(ui.item.id);
}
});
Как мне обрабатывать этот случай?
Ответы
Ответ 1
Вероятно, вы ищете расширение Скотта Гонсалеса autoSelect. Просто включение этого расширения на странице позволит запустить событие select, если пользователь вводит допустимое значение и не требует никаких изменений на вашем конце:
/*
* jQuery UI Autocomplete Auto Select Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
(function( $ ) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
var autocomplete = $( this ).data( "autocomplete" );
if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
autocomplete.widget().children( ".ui-menu-item" ).each(function() {
var item = $( this ).data( "item.autocomplete" );
if ( matcher.test( item.label || item.value || item ) ) {
autocomplete.selectedItem = item;
return false;
}
});
if ( autocomplete.selectedItem ) {
autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
}
});
}( jQuery ));
Пример использования расширения: http://jsfiddle.net/vFWUt/226/
Ответ 2
В версии jQuery >= 1.8.11 используйте параметр autoFocus, установленный в true
$( ".selector" ).autocomplete({ autoFocus: true });
Это имеет дополнительное преимущество автоматического выбора первого элемента в списке, чтобы пользователь мог просто нажать Enter или Tab, чтобы выбрать его, не набирая все имя.
Ответ 3
Добавить пользовательское событие onchange
$('#Animal').change(function(){
var selectedValue = this.value;
// Do what you want here:
...
});
Или используйте встроенное change событие виджета:
$('#Animal').autocomplete({
source: url,
minlength: 1,
select: function (event, ui) {
$("#Animal").val(ui.item.value);
changeUsersAnimal(ui.item.id);
}
change: function(event, ui) { // <=======
// ...
// ...
}
});
источник
Ответ 4
Для jQuery UI 1.9.2 мне пришлось немного изменить расширение AutoSelect Скотта Гонсалеса в ответ Andrew Whitaker:
var item = $( this ).data( "item.autocomplete" );
быть
var item = $( this ).data( "uiAutocompleteItem" );
а затем он отлично работает.
Ответ 5
Вы можете использовать это как
$("#inputbox").autocomplete({
source : reuesturl,
minLength : 1,
select : function(event, ui) {
$("#inputbox").attr('rel',ui.item.label);
},
open : function() {
$("#inputbox").attr('rel', 0);
},
close : function() {
if ($("#inputbox").attr('rel')=='0')
$("#inputbox").val('');
}
});
Ответ 6
Для jQuery UI - v1.11.0 мне пришлось немного изменить расширение автосохранения Scott González, как показано ниже.
/*
* jQuery UI Autocomplete Auto Select Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
$().ready(function () {
$.ui.autocomplete.prototype.options.autoSelect = true;
$(".ui-autocomplete-input").change(function (event) {
var autocomplete = $(this).data("uiAutocomplete");
if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
autocomplete.widget().children(".ui-menu-item").each(function () {
var item = $(this).data("uiAutocompleteItem");
if (matcher.test(item.label || item.value || item)) {
autocomplete.selectedItem = item;
return false;
}
});
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, { item: autocomplete.selectedItem });
}
});
});
И мне пришлось применить расширенный вариант автозаполнения autoSelect: true в моем определении автозаполнения.
Я взял немного кода из этих ответов.
ИЗМЕНИТЬ
Здесь мое определение автозаполнения, если кто-то заинтересован.
$("your selector").autocomplete({
// Below filter looks for the values that start with the passed in string
source: function (request, response) {
var matches = $.map(yourSourceArray, function (acItem) {
if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
return acItem;
}
});
response(matches);
},
// one can directly pass the source array instead like,
// source: yourSourceArray
autoSelect: true,
autoFocus: true,
minLength: 3,
change: function (event, ui) {
if (ui.item) {
// do whatever you want to when the item is found
}
else {
// do whatever you want to when the item is not found
}
}
})
Ответ 7
Следующий код - небольшая настройка на расширение Скотта для работы с версией jquery ui 1.10.3, я проверил приведенный ниже код только с версией 1.10.3.
(function($) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$( ".ui-autocomplete-input" ).live( "blur", function( event ) {
var autocomplete = $( this ).data( "ui-autocomplete" );
if ( ! autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" );
autocomplete.widget().children( ".ui-menu-item" ).each(function() {
var item = $( this ).data( "ui-autocomplete-item" );
if ( matcher.test( item.label || item.value || item ) ) {
autocomplete.selectedItem = item;
return false;
}
});
if ( autocomplete.selectedItem ) {
autocomplete._trigger( "select", event, { item: autocomplete.selectedItem } );
}
});
}(jQuery));
Ответ 8
Этот код только автооткладывается один раз. Все остальные после этого ничего не делают. Любые идеи?
Изменить: я прокомментировал эту строку, и теперь она работает. Не знаю, почему.
if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
Ответ 9
У меня возникла проблема с этой функцией на странице с использованием jquery 1.9.1 и jquery-ui 1.10.3. Основываясь на коде Скотта Гонсалеса и предложениях здесь и несколько часов избиения, я придумал следующее. Обратите внимание: мне нужно решение, в котором пользователю разрешено вводить одно из значений, предложенное автозаполнением, но я хотел бы разрешить случай, когда пользователь просто вводит одно из разрешенных значений, не выбирая его из раскрывающегося списка:
/*
* jQuery UI Autocomplete Auto Select Extension
*
* v 1.10
* Jomo Frodo ([email protected])
*
* This version requires an autoSelect parameter to be set on the autocomplete widget
*
* e.g.,
* $("#autoCompleteID").autocomplete({
source:url,
minLength:1,
autoSelect: true
});
*
* Based on an extension by Scott González (http://scottgonzalez.com)
* http://blog.jqueryui.com/2010/08/extensible-autocomplete/
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
$(window).load(
function() {
//$.ui.autocomplete.prototype.options.autoSelect = true;
// Doesn't appear to work in ui 1.10.3
// Must set the 'autoSelect' param on the autocomplete widget to get this to work.
$(".ui-autocomplete-input").bind('autocompleteresponse',
function(event, ui) {
$(this).data('menuItems', ui.content);
});
$(".ui-autocomplete-input").on(
"blur",
null,
function(event) {
var autocomplete = $(this).data("uiAutocomplete");
if (!autocomplete.options.autoSelect
|| autocomplete.selectedItem) {
return;
}
var matcher = new RegExp("^"
+ $.ui.autocomplete.escapeRegex($(this).val())
+ "$", "i");
var menuItems = $(this).data('menuItems');
for (idx in menuItems) {
var item = menuItems[idx];
if (matcher.test(item.value)) {
autocomplete.selectedItem = item;
break;
// return false;
}
}
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, {
item : autocomplete.selectedItem
});
} else {
this.value = '';
}
});
});
Ответ 10
использовать autoFocus: true
$('#Animal').autocomplete({
source: url,
**autoFocus: true,**
minlength: 1,
select: function (event, ui) {
$("#Animal").val(ui.item.value);
changeUsersAnimal(ui.item.id);
}
});
Ответ 11
Обновлен код Скотта Гонсалеса для работы с Jquery-UI 1.12
(function($) {
$.ui.autocomplete.prototype.options.autoSelect = true;
$('body').on('blur', '.ui-autocomplete-input', function(event) {
var autocomplete = $(this).data('ui-autocomplete');
if (!autocomplete.options.autoSelect || autocomplete.selectedItem) { return; }
var matcher = new RegExp($.ui.autocomplete.escapeRegex($(this).val()), 'i');
autocomplete.widget().children('.ui-menu-item').each(function(index, item) {
var item = $( this ).data('uiAutocompleteItem');
if (matcher.test(item.label || item.value || item)) {
autocomplete.selectedItem = item;
return false;
}
});
if (autocomplete.selectedItem) {
autocomplete
._trigger('select', event, {item: autocomplete.selectedItem});
}
});
}(jQuery));
Ответ 12
Я перепробовал все эти ответы, и окончательное решение для меня было поместить select пустым, если введенное значение отсутствует в списке:
$( "#input" ).autocomplete({
source: source,
minLength: 0,
change: function(event, ui) {
if(!ui.item) {
$(this).val("")
}
}
}).focus(function(){
$(this).data("uiAutocomplete").search($(this).val());
});
