【发布时间】：2010-05-01 11:24:22
【问题描述】：
在使用the jquery ui autocompletecombobox时，可以给combobox设置一个默认值吗？
【问题讨论】：
标签： jquery combobox jquery-ui-autocomplete
【发布时间】：2010-05-01 11:24:22
【问题描述】：
我尝试以我自己项目中的方式回答这个问题。
我阅读了您发布的页面上的演示源代码。在生成自动完成组合框的 jquery 代码中，我添加了一行代码，该代码行在创建组合框时处理，该组合框从“选择”元素中读取所选值。这样您就可以以编程方式设置默认值（就像您通常在不使用自动完成组合框时所做的那样）
这是我添加的一行：
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> </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);
【讨论】：
-
除了创建的无序列表中的默认值之外，还有什么方法可以让我获得默认值？
基于Mathieu Steele answer，而不是使用这个：
input.val( $("#combobox option:selected").text());
我用这个：
input.val( $(select).find("option:selected").text());
小部件现在可重复使用且干燥 :)
【讨论】：
答案 #1 非常接近，但如果您想保持函数的通用性，则不能对元素 ID 进行硬编码。改为添加此行并享受吧！
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
【讨论】：
您可以通过编辑自动完成器的以下语句来实现：
value = selected.val() ? selected.text() : "Select Institution";
【讨论】：
我在这里调整了响应以使用组合框已经定义的选择变量来查找所选选项并使用它。这意味着它对于您定义组合框的任何元素都是通用的（使用 id、class 或 selector ），并且也适用于多个元素。
input.val(select.find("option:selected").text());
希望这对某人有所帮助！
【讨论】：
在 jquery 组合框脚本中添加方法
setValue: function(o) {
$(this.element).val(o);
$(this.input).val($(this.element).find("option:selected").text());
}
【讨论】：
初始化后调用option方法设置框的值。
$('#combo').autocomplete( "option" , optionName , [value] )
【讨论】：
-
这在组合框示例中似乎没有任何作用。
-
这是不正确的。可用的选项（
optionName）被禁用、appendTo、autoFocus、delay、minLength、position 和 source。这些选项都没有设置初始值。
【讨论】：
-
出于某种原因，只是做 ("#selector").val(value) 似乎对组合框示例没有任何作用。
input.val( $(select).children("option:selected").text());
【讨论】：
我改用下面的代码行，只是实现相同结果的另一种方法:)
$('option:selected', this.element).text()
【讨论】：
我有一个适用于我实现 jquery UI 组合框的答案。代码中间的某处是这样的：
.val(value)
我改成：
.val(select.val())
很快，底层文本框的初始值就出现了。在我看来这应该是默认功能，但我知道什么？
【讨论】：
在“this._on( this.input, {”行之前添加一行代码
this.input[0].defaultValue = value;
在自动完成组合框脚本中创建代码之后。 也可以通过html的reset按钮进行重置。
【讨论】：
我遇到了这个错误，无论我编写什么代码都无法修复它（可能需要 3 个小时）。最后幸运的是，我浏览了http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ 网页（感谢@Dan 解决了我的头痛问题），发现真正缺少的部分不在“OnLoad”上，而是在 ui 定义函数本身上。 Jquery Ui官方网页上的标准定义函数不包含程序选择选项。
这是应该添加到定义函数中的函数：
//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");
【讨论】：
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);
【讨论】：