jquery ui autocomplete コンボボックスを使用する場合、コンボボックスのデフォルト値を設定できますか?
質問する
42914 次
14 に答える
24
私は自分のプロジェクトで行う方法でこれに答えようとしました。
あなたが投稿したページからデモのソースコードを読みました。オートコンプリート コンボボックスを生成する jquery コードに、「select」要素から選択した値を読み取るコンボボックスの作成時に処理するコードを 1 行追加しました。このようにして、プログラムでデフォルト値を設定できます (オートコンプリート コンボボックスを使用していない場合と同様に)。
ここに私が追加した1行があります：
input.val( $("#combobox option:selected").text());
簡潔でシンプル。input の値を #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> </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);
于 2010-05-11T00:53:25.010 に答える
19
これを使用する代わりに、Mathieu Steele answerに基づいて:
input.val( $("#combobox option:selected").text());
私はこれを使用します：
input.val( $(select).find("option:selected").text());
ウィジェットは再利用可能になり、DRY :)
于 2010-08-11T19:36:54.920 に答える
2
回答＃1は非常に近いですが、関数をジェネリックに保ちたい場合は、要素IDをハードコーディングすることはできません。代わりにこの行を追加してお楽しみください！
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
于 2010-05-19T04:05:11.290 に答える
2
これは、オートコンプリートの次のステートメントを編集することで実現できます。
value = selected.val() ? selected.text() : "Select Institution";
于 2012-01-19T10:47:51.093 に答える
1
メソッドをjqueryコンボボックススクリプトに追加
setValue: function(o) {
$(this.element).val(o);
$(this.input).val($(this.element).find("option:selected").text());
}
于 2011-12-20T11:52:35.127 に答える
1
ここで応答を微調整して、コンボボックスで既に定義されている選択変数を使用して、選択されたオプションを見つけて使用します。これは、( id 、 class 、または selector を使用して) コンボボックスを定義した要素に対してジェネリックであり、複数の要素に対しても機能することを意味します。
input.val(select.find("option:selected").text());
これが誰かを助けることを願っています!
于 2010-07-01T14:30:51.220 に答える
0
私はこのエラーを困惑させ、コーディングしたものに関係なく OnLoad イベントを修正できません (おそらく 3 時間後)。最後に幸運なことに、私はhttp://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ Webページ（私の頭痛を解決してくれた@DanのThx）に出くわし、実際の欠落を見ました一部は「OnLoad」ではなく、UI定義関数自体にあります。公式の Jquery Ui 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");
于 2015-04-04T12:39:24.680 に答える
0
this._on( this.input, {" " 行の前に 1 行のコードの下に追加
this.input[0].defaultValue = value;
オートコンプリート コンボボックス スクリプトでコードを作成した後。htmlのリセットボタンでもリセットできます。
于 2014-01-21T05:40:01.707 に答える
0
ボックスを初期化した後、メソッドを呼び出してoptionボックスの値を設定します。
$('#combo').autocomplete( "option" , optionName , [value] )
于 2010-05-04T04:17:57.017 に答える
0
jquery UIコンボボックスの実装に役立つ答えがあります。コードの途中のどこかにこれがありました：
.val(value)
私はそれを次のように変更しました：
.val(select.val())
さきほど、基になるテキストボックスの初期値が表示されました。これがデフォルトの機能であるように思えますが、何を知っていますか?
于 2013-04-14T00:42:56.400 に答える
0
input.val( $(select).children("option:selected").text());
于 2010-07-19T19:46:45.193 に答える
0
代わりに以下のコード行を使用しました。同じ結果を達成する別の方法です:)
$('option:selected', this.element).text()
于 2012-03-13T06:17:25.847 に答える
0
これはあなたを助けるかもしれません
于 2010-05-09T22:45:34.077 に答える
-1
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);
于 2010-05-04T04:13:29.457 に答える