当用户没有从下拉列表中选择一个选项时,jQuery ui自动完成

Question

使用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);
    }
});

我该如何处理这个案子？

Answer 1

使用jQuery版本> = 1.8.11时,使用autoFocus选项设置为true

$( ".selector" ).autocomplete({ autoFocus: true });

这具有自动选择列表中第一项的附加优点,因此用户只需按Enter或Tab即可选择它而无需键入所有名称.

Answer 2

你可能正在寻找ScottGonzález的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/

Answer 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) { // <=======
       // ... 
       // ...
   }
});

资源

Answer 4

对于jQuery UI 1.9.2,我不得不在Andrew Whitaker的答案中改变ScottGonzález的autoSelect扩展名:

var item = $( this ).data( "item.autocomplete" );

成为

var item = $( this ).data( "uiAutocompleteItem" );

然后它完美地运作.