如何使用 jquery 自动完成组合框设置默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2749721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you set a default value with jquery auto complete combobox?
提问by leora
When using the jquery ui autocompletecombobox, can you set a default value for the combobox?
使用jquery ui 自动完成组合框时，可以为组合框设置默认值吗？
回答by Mathieu Steele
I tried answer this in the way that I would do it in my own project.
我尝试以我在自己的项目中做的方式来回答这个问题。
I read through the demo source code from the page you posted. In the jquery code that generates the autocomplete combobox, I added one line of code that processes when the combobox is created that reads the selected value from your "select" element. This way you can programmatically set the default value (like you would normally if you were not using the autocomplete combobox)
我通读了您发布的页面上的演示源代码。在生成自动完成组合框的 jquery 代码中，我添加了一行代码，该代码在创建组合框时进行处理，从“选择”元素中读取所选值。通过这种方式，您可以以编程方式设置默认值（就像您通常不使用自动完成组合框时所做的那样）
Here is the one line I added:
这是我添加的一行：
input.val( $("#combobox option:selected").text());
Plain and simple. It sets the value of input to the text value of the selected element from #combobox. Naturally, you will want to update the id elements to match your individual project or page.
干净利落。它将 input 的值设置为 #combobox 中所选元素的文本值。自然地，您会希望更新 id 元素以匹配您的个人项目或页面。
Here it is in context:
这是在上下文中：
(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></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);
回答by eduludi
Based on Mathieu Steele answer, instead of using this:
基于Mathieu Steele 的回答，而不是使用这个：
input.val( $("#combobox option:selected").text());
I use this:
我用这个：
input.val( $(select).find("option:selected").text());
Widget is now reusable and DRY :)
小部件现在可重用且干燥 :)
回答by user344712
Answer #1 is very close, but you cannot hard-code the element ID if you want to keep the function generic. Add this line instead and enjoy!
答案 #1 非常接近，但如果您想保持函数的通用性，则不能对元素 ID 进行硬编码。改为添加此行并享受！
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
回答by samba
You can achieve this by editing the following statement of the auto-completer:
您可以通过编辑自动完成程序的以下语句来实现此目的：
value = selected.val() ? selected.text() : "Select Institution";
回答by Conrad
add method to jquery combobox script
将方法添加到 jquery 组合框脚本
setValue: function(o) {
$(this.element).val(o);
$(this.input).val($(this.element).find("option:selected").text());
}
回答by jasherai
I've tweaked the responses here to use the select variable already defined by the combobox to find the selected option and use that. This means it is generic for which ever element you have defined the combobox on (using id, class or selector ) and will work for multiple elements also.
我已经调整了这里的响应，以使用组合框已经定义的选择变量来查找所选选项并使用它。这意味着它对于您定义组合框的任何元素都是通用的（使用 id、class 或 selector ）并且也适用于多个元素。
input.val(select.find("option:selected").text());
Hope this helps someone!
希望这可以帮助某人！
回答by szalonna
input.val( $(select).children("option:selected").text());
回答by josh3736
Call the optionmethod to set the box's value after you've initialized it.
option在初始化框后调用该方法来设置框的值。
$('#combo').autocomplete( "option" , optionName , [value] )
回答by Nick Kahn
回答by Brandon Truong
I used the below line of code instead, just another way of achieving the same result :)
我改用下面的代码行，只是实现相同结果的另一种方式:)
$('option:selected', this.element).text()
