Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

370
Visualizações
jquery UI Combobox ONCHANGE

how can I attach an onchange function in a jqueryUI combobox? Here is my code:

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

When the value changes, it will alert the updated value.

Any help please.. :)

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

The combobox example source is all right there in the example. I'd trigger the change event of the underlying select by modifying the source code like this (changing the select event handler inside autocomplete initialization inside the plugin):

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

and then define an event handler for the regular change event of the select:

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

Unfortunately this won't work exactly the same way as the normal select.change event: it will trigger even you select the same item from the combobox.

Try it out here: http://jsfiddle.net/andrewwhitaker/hAM9H/

over 4 years ago · Santiago Trujillo Relatório

0

IMHO, an even simpler way to detect the user has changed the combobox (without having to tweak the jQuery UI autocomplete combobox source code) is as follows; this works for me. It's repetitious if you've got lots of them, though surely there's a way to refactor. Thanks to all who have studied and explained this widget at length, here and elsewhere.

$("#theComboBox").combobox({ 
        select: function (event, ui) { 
            alert("the select event has fired!"); 
        } 
    }
);
over 4 years ago · Santiago Trujillo Relatório

0

Into the ui.combobox plugin :

i added at the end of the select method :

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

i added before the "var input ..." :

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

after, to have a functional onchange event... on ui.combobox i commented the change method and moved its code to the checkval method that extends ui.autocomplete :

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

and i coded the input change method as below :

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
});
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda