当使用
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); } });
我该如何处理这种情况?
解决方法
您可能正在寻找
Scott González’
autoSelect
extension.只有在页面上包含此扩展名将允许选择事件触发,如果用户输入有效值,并且您的最终不需要更改:
/* * 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/的示例