如何使用 jquery 自动完成组合框设置默认值?
-
02-10-2019 - |
题
使用时 jquery ui 自动完成 组合框, ,你能为组合框设置默认值吗?
解决方案
我尝试以自己的项目来回答这个问题。
我从您发布的页面中阅读了演示源代码。在生成AutoCoctlete Combobox的jQuery代码中,我添加了一行代码,该代码在创建ComboBox时会从您的“ Select”元素读取所选值。这样,您可以通过编程方式设置默认值(就像您不使用自动完整的combobox时通常会一样)
这是我添加的一行:
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答案, ,而不是使用它:
input.val( $("#combobox option:selected").text());
我用这个:
input.val( $(select).find("option:selected").text());
小部件现在可以重复使用且干燥:)
答案#1非常接近,但是如果要保持函数通用,则不能对元素ID进行硬编码。改用此行并享受!
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
您可以通过编辑Auto Completer的以下声明来实现这一目标:
value = selected.val() ? selected.text() : "Select Institution";
我在此处调整了响应,以使用ComboBox已经定义的选择变量来找到所选的选项并使用它。这意味着您对您定义了combobox(使用ID,类或选择器)的任何元素是通用的,并且也将适用于多个元素。
input.val(select.find("option:selected").text());
希望这对某人有帮助!
将方法添加到jQuery Combobox脚本
setValue: function(o) {
$(this.element).val(o);
$(this.input).val($(this.element).find("option:selected").text());
}
致电 option
初始化后,设置盒子值的方法。
$('#combo').autocomplete( "option" , optionName , [value] )
input.val( $(select).children("option:selected").text());
我改用以下代码行,只是实现相同结果的另一种方法:)
$('option:selected', this.element).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);
我的答案可用于实施JQuery UI Combobox。在代码中间的某个地方是:
.val(value)
我将其更改为:
.val(select.val())
和Presto,出现了基础文本框的初始值。在我看来,这应该是默认功能,但是我知道什么?
在一行代码之前添加以下“” this._on( this.input, {
“ 线
this.input[0].defaultValue = value;
在AutoCoctlete Combobox脚本中创建代码后。您也可以使用HTML的重置按钮重置。
我遇到了这个错误,无论我编码什么(可能在3个小时)都无法修复它的Onload事件。最后,我很幸运 http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ 网页(@dan用于解决我的头痛的thx),并且看到真正缺少的部分不在“ onload”上,在UI定义函数上本身。官方jQuery UI网页上的Standart定义功能不包含编程方式选择选项。
这是函数应添加到定义函数:
//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");