web-dev-qa-db-ja.com

jqueryオートコンプリートコンボボックスでデフォルト値を設定するにはどうすればよいですか？

jquery uiオートコンプリートコンボボックスを使用する場合、コンボボックスのデフォルト値を設定できますか？

jquerycomboboxjquery-ui-autocomplete
17
leora

自分のプロジェクトと同じように答えてみました。

あなたが投稿したページからデモのソースコードを読みました。オートコンプリートコンボボックスを生成するjqueryコードに、「select」要素から選択した値を読み取るコンボボックスの作成時に処理するコードを1行追加しました。このようにして、プログラムでデフォルト値を設定できます（オートコンプリートコンボボックスを使用していない場合の通常のように）

これが私が追加した1行です：

input.val( $("#combobox option:selected").text());

簡潔でシンプル。入力の値を、＃comboboxから選択した要素のテキスト値に設定します。当然、個々のプロジェクトまたはページに一致するようにid要素を更新する必要があります。

ここにそれが文脈にあります：

(function($) {
    $.widget("ui.combobox", {
        _create: function() {
            var self = this;
            var select = this.element.hide();
            var input = $("<input>")
                .insertAfter(select)
                .autocomplete({
                    source: function(request, response) {
                        var matcher = new RegExp(request.term, "i");
                        response(select.children("option").map(function() {
                            var text = $(this).text();
                            if (this.value && (!request.term || matcher.test(text)))
                                return {
                                    id: this.value,
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text
                                };
                        }));
                    },
                    delay: 0,
                    change: function(event, ui) {
                        if (!ui.item) {
                            // remove invalid value, as it didn't match anything
                            $(this).val("");
                            return false;
                        }
                        select.val(ui.item.id);
                        self._trigger("selected", event, {
                            item: select.find("[value='" + ui.item.id + "']")
                        });

                    },
                    minLength: 0
                })
                .addClass("ui-widget ui-widget-content ui-corner-left");



            // This line added to set default value of the combobox
            input.val( $("#combobox option:selected").text());





            $("<button>&nbsp;</button>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .insertAfter(input)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            }).removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function() {
                // close if already visible
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return;
                }
                // pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
                input.focus();
            });
        }
    });

})(jQuery);
24
Mathieu Steele

Mathieu Steeleの回答 に基づいて、これを使用する代わりに：

input.val( $("#combobox option:selected").text());

私はこれを使用します：

input.val( $(select).find("option:selected").text());

ウィジェットが再利用可能になり、DRY :)

19
eduludi

これは、オートコンプリーターの次のステートメントを編集することで実現できます。

value = selected.val() ? selected.text() : "Select Institution";
2
samba

回答＃1は非常に近いですが、関数をジェネリックに保ちたい場合は、要素IDをハードコーディングすることはできません。代わりにこの行を追加してお楽しみください！

input.val(jQuery("#"+select.attr("id")+" :selected").text() );
2
user344712

jqueryコンボボックススクリプトにメソッドを追加します

setValue: function(o) {            
    $(this.element).val(o);
    $(this.input).val($(this.element).find("option:selected").text());            
}
1
Conrad

ここで応答を微調整して、コンボボックスですでに定義されている選択変数を使用して、選択されたオプションを見つけて使用します。これは、コンボボックスを（id、class、またはselectorを使用して）定義した要素に対して一般的であり、複数の要素に対しても機能することを意味します。

input.val(select.find("option:selected").text());

これが誰かを助けることを願っています！

1
jasherai
function setAutoCompleteCombo(id,value,display) {
    if($(id+"[value="+value+"]").text().localeCompare("")==0){
        $("<option value='"+value+"'>"+display+"</option>").appendTo($(id));
    }
    $(id).val(value);
    $(id).next().val($(id+" :selected").text());
}

最初のページまたはランタイムでこの関数を呼び出すことで解決しました。例：

setAutoCompleteCombo('#frmData select#select_id',option_value,option_text);
0
ruttho

ボックスを初期化した後、optionメソッドを呼び出してボックスの値を設定します。

$('#combo').autocomplete( "option" , optionName , [value] )
0
josh3736

私はこのエラーを困惑させ、何をコーディングしてもOnLoadイベントを修正できません（おそらく3時間）。ついに幸運にも私は出くわしました http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ ウェブページ（私の解決のための@DanのThx頭痛の種）そして、実際に欠けている部分が「OnLoad」ではなく、UI定義関数自体にあることを確認しました。公式のJqueryUi Webページの標準定義関数には、プログラムで選択するオプションが含まれていません。

定義関数に追加する必要のある関数は次のとおりです。

//allows programmatic selection of combo using the option value
        setValue: function (value) {
            var $input = this.input;
            $("option", this.element).each(function () {
                if ($(this).val() == value) {
                    this.selected = true;
                    $input.val(this.text);
                    return false;
                }
            });
        }

また、オプション値ではなくオプションテキストを介して選択を変更する別の関数を作成しました

//allows programmatic selection of combo using the option text
            setValueText: function (valueText) {
                var $input = this.input;
                var selectedText;                   
                $("option", this.element).each(function () {
                    if ($(this).text() == valueText) {
                        this.selected = true;
                        $input.val(this.text);                                                    
                        return false;
                    }
                });                        
            }

これらの関数は、OnLoadまたは別の関数で次のように使用できます。

$("#yourComboBoxID").combobox("setValue", "Your Option Value");

または

$("#yourComboBoxID").combobox("setValueText", "Your Option Text");
0
Tarık Özgün Güner

これはあなたを助けるかもしれません

http://forum.jquery.com/topic/autocomplete-default-value

0
Nick Kahn

代わりに、以下のコード行を使用しました。同じ結果を得る別の方法です:)

$('option:selected', this.element).text()
0
Brandon Truong

JqueryUIコンボボックスの実装に役立つ答えがあります。コードの途中のどこかにこれがありました：

.val(value)

私はそれを次のように変更しました：

.val(select.val())

そしてpresto、基礎となるテキストボックスの初期値が現れました。これがデフォルトの機能であるように私には思えますが、私は何を知っていますか？

0
EdwardF

「this._on( this.input, {」行の前に1行のコードを追加します

this.input[0].defaultValue = value;

オートコンプリートコンボボックススクリプトでコードを作成した後。 htmlのリセットボタンでリセットすることもできます。

0
Jagdish
input.val( $(select).children("option:selected").text());
0
szalonna