web-dev-qa-db-ja.com

jquery UI Combobox ONCHANGE

jqueryUIコンボボックスにonchange関数を添付するにはどうすればよいですか？ここに私のコードがあります：

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

値が変更されると、更新された値が警告されます。

助けてください.. :)

jqueryjquery-uijquery-ui-autocomplete
32
Vincent Dagpin

この例では、コンボボックスのサンプルソースはすべてそこにあります。次のようにソースコードを変更して、基になるselectのchangeイベントをトリガーします（プラグイン内のオートコンプリート初期化内でselectイベントハンドラーを変更します）。

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

changeの通常のselectイベントのイベントハンドラーを定義します。

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

残念ながら、これは通常のselect.changeイベントとまったく同じようには機能しません。コンボボックスから同じアイテムを選択してもトリガーされます。

ここで試してみてください： http://jsfiddle.net/andrewwhitaker/hAM9H/

50
Andrew Whitaker

私見、ユーザーを検出するさらに簡単な方法は、コンボボックスを変更しました（jQuery UIオートコンボコンボボックスのソースコードを微調整する必要はありません）。これは私のために動作します。確かにリファクタリングする方法はありますが、たくさんある場合は繰り返します。ここと他の場所でこのウィジェットを詳細に研究して説明してくれたすべての人に感謝します。

$("#theComboBox").combobox({ 
        select: function (event, ui) { 
            alert("the select event has fired!"); 
        } 
    }
);
21
David Barrows

Ui.comboboxプラグインへ：

私はselectメソッドの最後に追加しました：

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

「var input ...」の前に追加しました。

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

その後、機能的なonchangeイベントを取得するために... ui.comboboxでchangeメソッドにコメントし、ui.autocompleteを拡張するcheckvalメソッドにコードを移動しました。

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

そして、私は以下のように入力変更方法をコーディングしました：

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
});
1
ccyborg

これは私のために働くようです

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

直前

self._trigger("selected", event, {
0
Oscar Nevarez
$("#theComboBox").combobox({ 
    select: function (event, ui) { 
        alert("the select event has fired!"); 
    } 
}

）;

0
Jagdish

ドキュメントの「イベント」セクションで、 変更を処理する このように...

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});
0
JasCav

実際、onchangeイベントには既に「フック」があります。

必要なメソッド呼び出しまたはコールバックの次の行を変更するだけです。

autocompletechange: "_removeIfInvalid"
0
Thermech

最も単純な方法（IMHO）、コンボボックスをウィジェットとして展開する場合：

  1. ウィジェットで「_create」メソッドを見つける

  2. その内部で「オートコンプリート」を探します（入力が管理されます）

  3. 「選択」メソッドを追加（使用）して、データを取得します：ui.item.value

 
（function（$）{
 $。widget（ "ui.combobox"、{
 //デフォルトオプション
 options：{
 //オプション.... 
}、
 _create：function（）{
 
 //一部のコード.... 
 
 //これは探している入力です。
 input = $（ ""）
 .appendTo（wrapper）
 .val（value）
 .addClass（ "ui-state-default"）
 
 //これは、あなたが探しているオートコンプリートです。 
 minLength：0、
 source：function（request、response）{
 //一部のコード... 
}、
 
 //これはあなたが探すselectメソッドです... 
 select：function（event、ui）{
 
 //これは選択した値です
 console.log（ui.item.value）; 
}、
 change：function（event、ui）{
 
 //一部のコード... 
} 
}）
 //残りのコード
}、
 
 destroy：function（）{
 this.wrapper.remove（）; 
 this.element.show（ ）; 
 $ .Widget.prototype.destroy.call（this）; 
} 
}）;
0
Jeffz