¿cómo puedo adjuntar un onchange función en un jqueryUI combobox? Aquí está mi código:

$(".cmbBox").combobox({
     change:function(){
         alert($(this).val());
     }
});

Cuando el valor cambia, se enviará una alerta al valor actualizado.

Cualquier ayuda por favor.. 🙂

  • Que combobox? La amabilidad de proporcionar la dirección URL de la específica que se esté usando.
  • jqueryui.com/demos/autocomplete/#combobox este.. el combobox submenú sir..
  • De hecho, ya hay un «gancho» para el evento onchange. Buscar autocompletechange. Que es lo que he usado y funciona bien! He añadido una respuesta que coincida con este comentario

8 Comentarios

  1. 50

    El combobox ejemplo, fuente de todo bien en el ejemplo. Me gustaría activar la change caso de que el subyacente seleccione modificar el código fuente como esta (cambiando el select controlador de eventos dentro de la función autocompletar de inicialización dentro del plugin):

    /* Snip */
    select: function( event, ui ) {
        ui.item.option.selected = true;
        self._trigger( "selected", event, {
            item: ui.item.option
        });
        select.trigger("change");                            
    },
    /* Snip */

    y, a continuación, definir un controlador de eventos para el regular change caso de la select:

    $(".cmbBox").change(function() {
        alert(this.value);
    });

    Por desgracia esto no va a funcionar exactamente de la misma manera como la normal select.change evento: se activará incluso seleccionar el mismo elemento del combobox.

    Probarlo aquí: http://jsfiddle.net/andrewwhitaker/hAM9H/

    • Muy bonito! Eso es exactamente lo que yo estaba pensando, aunque me confundí por la línea de arriba «._trigger», pensé que este era el camino para desencadenar eventos. Es «provocar» un javascript o jQuery Método? Gracias
    • Buena pregunta– self._trigger es una interna de jqueryUI función (github.com/jquery/jquery-ui/blob/master/ui/…) que autocompletar usos.
    • Gracias! Me preguntaba la diferencia entre _trigger y trigger porque ambos son utilizados en este contexto.
    • funciona perfecto! gracias (un año después)
    • He tenido que cambiar el «yo» con «que» para que este fragmento no iba a funcionar. e incluso entonces, sólo apresado cambios que fueron el resultado de la selección de la lista desplegable, pero no desde el texto libre. finalmente, sólo he añadido el «cambio:» debajo de «seleccionar:» en combobox.js este>>>seleccione.trigger(«cambio»);<<< y ahora que las capturas de todo tipo de cambios.
    • +1 para el jsfiddle enlace. El jeasyui.com el sitio es un comienzo, pero no los hay en cualquier lugar cerca de suficientes ejemplos que hay. No puedo encontrar una sola que no uso ‘easyui-combobox’ para la creación de…
    • Esto era EXACTAMENTE lo que estaba buscando.
    • A menos que yo esté haciendo algo mal, este código no funciona con la versión más reciente del código de combobox. Obtengo el error Uncaught ReferenceError: select is not defined cuando trato de usar este.
    • No estoy seguro de lo que está sucediendo en su código, pero echa un vistazo a los últimos comentarios sobre esta respuesta, podría ser el caso de stackoverflow.com/a/11042693/1067465
    • Gracias …….hablando desde el futuro =)

  2. 22

    Mi humilde opinión, incluso de una manera más fácil de detectar que el usuario ha cambiado el combobox (sin tener que modificar la interfaz de usuario jQuery autocomplete combobox código fuente) es la siguiente; esto funciona para mí. Es repetitivo si tienes un montón de ellos, a pesar de que seguramente hay una manera de refactorizar. Gracias a todos los que han estudiado y explicado este widget en longitud, aquí y en otros lugares.

    $("#theComboBox").combobox({ 
            select: function (event, ui) { 
                alert("the select event has fired!"); 
            } 
        }
    );
    • Esto era lo que yo necesitaba. El otro método hablando acerca de los desencadenadores y editar el código no funciona debido a que el origen de lo que tenía era lo suficientemente diferentes como para que yo no podía encontrar el lugar adecuado para agregarlo. Pero esta técnica funcionó muy bien! Gracias.
    • David código es excelente y trabajó para mí. Gracias David. Andrew código de mirar bastante decente, pero no estoy seguro de por qué no funcionó para mí.
    • Funciona como un encanto
    • Este código se hizo el truco. Gracias
    • No funciona para mí : $("#productList").combobox({ url: 'productList', valueField:'code', textField:'code', editable:false, select: function (event, ui) { alert("the select event has fired!"); } });
  3. 1

    En la interfaz de usuario.combobox plugin :

    he añadido al final del método select :

    $(input).trigger("change", ui);

    he añadido antes de la «var entrada …» :

    select.attr('inputId', select.attr('id') + '_input');

    después, para tener un sistema funcional evento onchange… en la interfaz de usuario.combobox me comentó que el cambio de método y se movió de su código a la checkval método que se extiende de interfaz de usuario.autocompletar :

    $.extend( $.ui.autocomplete, {
        checkVal: function (select) {
                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                            valid = false;
                $(select).children("option").each(function () {
                    if ($(this).text().match(matcher)) {
                        this.selected = valid = true;
                        return false;
                    }
                });
                if (!valid) {
                    //remove invalid value, as it didn't match anything
                    $(this).val("");
                    $(select).val("");
                    $(this).data("autocomplete").term = "";
                    $(this).data("autocomplete").close();
                }
            }
    });

    y lo programé la entrada método de cambio de la siguiente manera :

    var oCbo = ('#MyCbo').combobox();
    $('#' + oCbo.attr('inputId')).change(function () {
    
        //from select event : check if value exists
        if (arguments.length < 2) {
            $.ui.autocomplete.checkVal.apply(this, [oCbo]);
        }
    
            //YOUR CODE HERE
    });
  4. 0

    Esto parece funcionar para mí

    if('function' == typeof(callback = ui.item.option.parentElement.onchange))
                            callback.apply(this, []);

    justo antes de

    self._trigger("selected", event, {
  5. 0

    forma más sencilla (en mi humilde opinión), si se va a implementar combobox como widget:

    1. encontrar «_create» método en el widget

    2. dentro de ella busca la opción «autocompletar» (donde la entrada es administrado)

    3. agregar (utilización) «, seleccione» método para obtener los datos: la interfaz de usuario.elemento.valor

     
    (function($){ 
    $.widget( "interfaz de usuario.combobox", { 
    //opciones por defecto 
    opciones: { 
    //sus opciones .... 
    }, 
    _create: function() { 
    
    //algún código .... 
    
    //esta es la entrada que usted busca 
    de entrada = $( "" ) 
    .appendTo( wrapper ) 
    .val( valor ) 
    .addClass( "ui-state-default" ) 
    
    //esta es la función autocompletar usted busca 
    .autocomplete({ 
    delay: 0, 
    minLength: 0, 
    fuente: función( request, response ) { 
    //código ... 
    }, 
    
    //este es seleccionar el método que usted busca ... 
    seleccione: function( event, ui ) { 
    
    //esta es tu valor seleccionado 
    la consola.log(interfaz de usuario.elemento.valor); 
    }, 
    cambio: function( event, ui ) { 
    
    //código ... 
    } 
    }) 
    //resto del código 
    }, 
    
    destruir: function() { 
    este.la envoltura.remove(); 
    este.elemento.show(); 
    $.Widget.el prototipo.destruir.call( this ); 
    } 
    }); 
    
  6. 0

    De hecho, ya hay un «gancho» para el evento onchange.

    Acaba de cambiar la siguiente línea para la llamada al método o la devolución de llamada que desea:

    autocompletechange: "_removeIfInvalid"
    • Puede dar un ejemplo donde se cambia el anterior por lo que activará una alerta? o una función que activa una alerta?
    • es en la documentación: jqueryui.com/autocomplete/#combobox
  7. 0
    $("#theComboBox").combobox({ 
        select: function (event, ui) { 
            alert("the select event has fired!"); 
        } 
    }

    );

    • Este es exactamente el mismo código, según lo sugerido por David Túmulos 5 meses antes.

Dejar respuesta

Please enter your comment!
Please enter your name here