ejemplo - jquery autocomplete combobox

jQuery ui autocompletar cuando el usuario no selecciona una opción del menú desplegable

Question

Al usar el complemento de autocompletado de jquery , ¿qué haces cuando el usuario no selecciona un elemento en la lista, sino que escribe un valor válido y las pestañas de distancia?

por ejemplo, cuando la lista de autocompletar contiene:

Cat
Dog
Fish 

Y el usuario escribe cat , pero no selecciona Cat en la lista desplegable de autocompletar y, en su lugar, pestañas. Como no seleccionaron ningún elemento de la lista, el evento de selección de autocompletar no se dispara y perdemos la oportunidad de responderlo:

$(''#Animal'').autocomplete({
    source: url,
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
});

¿Cómo manejo este caso?

Answer 1

Agregar un evento personalizado de onchange

$(''#Animal'').change(function(){
    var selectedValue = this.value;
    // Do what you want here:
    ...
});

O use el evento de change incorporado del widget:

$(''#Animal'').autocomplete({
    source: url,
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
   change: function(event, ui) { // <=======
       // ... 
       // ...
   }
});

source

Answer 2

Código actualizado de Scott Gonzalez para trabajar con 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));

Answer 3

Con la versión jQuery> = 1.8.11 use la opción de autoenfoque establecida en true

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

Eso tiene la ventaja adicional de seleccionar automáticamente el primer elemento de la lista para que el usuario pueda presionar Enter o Tab para seleccionarlo sin tener que escribir todo el nombre.

Answer 4

El siguiente código es un pequeño retoque en la extensión de Scott para trabajar con la versión 1.10.3 de jquery ui. He probado el código siguiente solamente con la versión 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));

Answer 5

Estaba teniendo problemas con esta función en una página usando jquery 1.9.1 y jquery-ui 1.10.3. Basado en el código de Scott Gonzalez y las sugerencias aquí y algunas horas de agitación, se me ocurrió lo siguiente. Tenga en cuenta que quería una solución en la que el usuario solo pudiera ingresar uno de los valores sugeridos por la función Autocompletar, pero quería permitir que el usuario simplemente escriba uno de los valores permitidos sin seleccionarlo del menú desplegable:

/*
 * 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 = '''';
                        }
                    });

        });

Answer 6

Este código solo se selecciona automáticamente una vez. Todos los demás después de eso no hacen nada. ¿Algunas ideas?

Editar: Comenté esta línea y ahora funciona. No sé por qué.

if ( !autocomplete.options.autoSelect || autocomplete.selectedItem ) { return; }

Answer 7

Para jQuery UI - v1.11.0 tuve que cambiar un poco la extensión de autoSelect de Scott González como se muestra a continuación.

/*
 * 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 });
        }
    });
});

Y tuve que aplicar la opción autocompletar ampliada autoSelect: true en mi definición de autocompletar.

Tomé un poco de código de estas respuestas.

1. trushkevich
2. gdoron y
3. Cagatay Kalan

EDITAR

Aquí está mi definición de autocompletar, en caso de que alguien esté interesado.

$("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
        }
    }
})

Answer 8

Para jQuery UI 1.9.2 tuve que cambiar un poco la extensión autoSelect de Scott González en la respuesta de Andrew Whitaker:

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

ser

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

y luego funciona a la perfección

Answer 9

Probablemente estés buscando la extensión autoSelect Scott González . La simple inclusión de esta extensión en la página permitirá que el evento de select se select si el usuario ingresa un valor válido y no debe requerir cambios en su extremo:

/*
 * 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 ));

Aquí hay un ejemplo con la extensión : http://jsfiddle.net/vFWUt/226/

Answer 10

Puedes usar así

$("#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('''');
    }
});

Answer 11

use autoFocus: true

$(''#Animal'').autocomplete({
    source: url,
    **autoFocus: true,**
    minlength: 1,
    select: function (event, ui) {
        $("#Animal").val(ui.item.value);
        changeUsersAnimal(ui.item.id);
    }
});