web-dev-qa-db-ja.com

値をjqueryオートコンプリートコンボボックスに設定します

jqueryオートコンプリートコンボボックス を使用していますが、すべて問題ありません。しかし、JavaScriptを介して$("#value").val("somevalue")のような特定の値を設定したいのですが、要素を選択するように設定されていますが、オートコンプリートで入力要素に変更はありません。

もちろん、この入力を選択して値を直接設定することはできますが、それを行う他の方法はありますか？ this.element.bind("change", function(){alert(1)})のように_this.element_にバインドを設定しようとしましたが、効果はありませんでした。そして、その理由はわかりません。

編集

この場合の回避策を見つけました。しかし、私はそれが好きではありません。 ui.comboboxの_create関数に次のコードを追加しました

_this.element.bind("change", function() {  
    input.val( $(select).find("option:selected").text());  
});
_

また、値を変更する必要がある場合は、$("#selector").val("specificvalue").trigger("change");を使用できます。

javascriptjqueryjquery-uijquery-ui-autocomplete
10
xandox

このデモ あなたが探しているものですか？

リンクは、jQuery UIオートコンプリートの値をJavaに設定します。通常のキーボードイベントを使用してオプションをナビゲートできるように、フォーカスは入力に残されます。

編集：次のようにコンボボックスに別の関数を追加するのはどうですか？

autocomplete : function(value) {
    this.element.val(value);
    this.input.val(value);
}

設定したい値でそれを呼び出します：

$('#combobox').combobox('autocomplete', 'Java');

更新されたデモ

私はあなたが望むことをするために利用可能な既存の関数を見つけることができませんが、これは私にとってうまく機能しているようです。それがあなたが必要とする行動に近いことを願っています。

27
andyb

@andyb、書き直しだと思います：

    autocomplete: function (value) {
        this.element.val(value);

        var selected = this.element.children(":selected"),
                value = selected.val() ? selected.text() : "";
        this.input.val(value);
    }
5
nthaih

私は値を設定するための迅速で汚い方法を管理しました。ただし、ドロップダウンに表示するアイテムの値とテキストの両方を知っている必要があります。

var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);
5
seanfitzg

Andybの機能は本当に気に入っていますが、Enterキーを押したり、入力にフォーカスを失ったりしたときに「selected」が処理されないため、変更イベントのトリガーを処理できるように、イベント処理をもう少し行う必要がありました（タブを押すか、マウスクリック）。

そのため、andybがベースとして行ったことと、jQueryオートコンプリートスクリプトの最新バージョンを使用して、次のソリューションを作成しました：[〜＃〜] demo [〜＃ 〜]

  • Enter：メニューが表示されている場合は最初の項目を選択します
  • Focus Lost：部分一致はメッセージが見つからないことをトリガーし、エントリをクリアします（jQuery UI）が、完全に入力された回答はその値を「選択」します（大文字と小文字は区別されません）

変更方法を利用する方法：

$("#combobox").combobox({
    selected: function (event, ui) {
        $("#output").text("Selected Event >>> " + $("#combobox").val());
    }
})
.change(function (e) {
    $("#output").text("Change Event >>> " + $("#combobox").val());
});

うまくいけば、これは、「選択された」ままのギャップを補うために追加の変更イベント機能を必要とする他の人に役立つでしょう。

2
Justin Fentress