当用户没有从下拉列表中选择一个选项时，jQuery ui自动完成
使用jquery自动完成插件时 ，当用户没有选择列表中的项目，而是键入有效值和标签时，您会怎么做？
例如，当自动完成列表包含：
Cat Dog Fish 用户输入cat ，但不从自动填充的下拉列表中选择Cat ，而是选择标签。 因为他们没有从列表中选择任何项目，所以自动完成选择事件不会触发，我们将无法响应它：
$('#Animal').autocomplete({ source: url, minlength: 1, select: function (event, ui) { $("#Animal").val(ui.item.value); changeUsersAnimal(ui.item.id); } });
我该如何处理这个案子？
你可能正在寻找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/
使用jQuery版本> = 1.8.11时，使用autoFocus选项设置为true
$( ".selector" ).autocomplete({ autoFocus: true });
这具有自动选择列表中第一项的附加优点，因此用户只需按Enter或Tab即可选择它而无需键入所有名称。
添加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) { // <======= // ... // ... } });
资源
对于jQuery UI 1.9.2，我不得不在Andrew Whitaker的答案中改变ScottGonzález的autoSelect扩展名：
var item = $( this ).data( "item.autocomplete" );
成为
var item = $( this ).data( "uiAutocompleteItem" );
然后它完美地运作。
你可以像这样使用
$("#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(''); } });
对于jQuery UI - v1.11.0我不得不改变ScottGonzález的autoSelect扩展名 ，如下所示。
/* * 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 。
我从这些答案中提取了一些代码。
- trushkevich
- gdoron和
- Cagatay Kalan
编辑
这是我的自动完成定义，以防有人感兴趣。
$("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 } } })
下面的代码是对使用jquery ui 1.10.3版本的Scott扩展的一点调整，我已经使用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));
此代码仅自动选择一次。 之后的所有其他人都无能为力。 有任何想法吗？
编辑：我注释掉了这一行，它现在有效。 不知道为什么。
if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }
我在使用jquery 1.9.1和jquery-ui 1.10.3的页面中遇到此函数的问题。 根据Scott Gonzalez的代码和这里的建议以及几个小时的颠簸，我想出了以下内容。 注意，我想要一个解决方案，其中只允许用户输入自动完成建议的值之一 – 但我想允许用户只输入一个允许值而不从下拉列表中选择的情况：
/* * jQuery UI Autocomplete Auto Select Extension * * v 1.10 * Jomo Frodo (jomofrodo@gmail.com) * * This version requires an autoSelect parameter to be set on the autocomplete widget * * eg, * $("#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 = ''; } }); });
使用autoFocus: true
$('#Animal').autocomplete({ source: url, **autoFocus: true,** minlength: 1, select: function (event, ui) { $("#Animal").val(ui.item.value); changeUsersAnimal(ui.item.id); } });
更新了Scott Gonzalez的代码以使用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));