如何使用jquery auto complete combobox设置默认值？

使用jquery ui autocomplete combobox时 ，可以为combobox设置默认值吗？

Answer 1

我试着按照我在自己的项目中的方式回答这个问题。

我从您发布的页面中读取了演示源代码。 在生成自动完成combobox的jquery代码中，我添加了一行代码，这些代码在创建combobox时处理，该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 = $("") .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"), "$1"), 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()); $(" ") .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); 

Answer 2

根据Mathieu Steele的回答 ，而不是使用这个：

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

我用这个：

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

小部件现在可重复使用，干燥:)

Answer 3

答案＃1非常接近，但如果要保持函数通用，则无法对元素ID进行硬编码。 添加此行，享受！

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

Answer 4

您可以通过编辑auto-completer的以下语句来实现此目的：

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

Answer 5

我在这里调整了响应，使用combobox已经定义的select变量来查找所选的选项并使用它。 这意味着它是通用的，你已经定义了combobox（使用id，类或选择器），并且也可以用于多个元素。

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

希望这有助于某人！

Answer 6

将方法添加到jquerycombobox脚本

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

Answer 7

初始化后，调用option方法设置框的值。

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

Answer 8

可能这会对你有所帮助

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

Answer 9

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

Answer 10

我使用下面的代码行，只是另一种方法来实现相同的结果:)

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

Answer 11

 function setAutoCompleteCombo(id,value,display) { if($(id+"[value="+value+"]").text().localeCompare("")==0){ $(""+display+"").appendTo($(id)); } $(id).val(value); $(id).next().val($(id+" :selected").text()); } 

我通过在初始页面或运行时调用此函数来解决它。 例：

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

Answer 12

我有一个答案适用于我的jquery UIcombobox的实现。 在代码中间的某处是这样的：

 .val(value) 

我改成了：

 .val(select.val()) 

并且presto，底层文本框的初始值出现。 在我看来这应该是默认function，但我知道什么？

Answer 13

在“ this._on( this.input, { ”行之前）添加一行代码

 this.input[0].defaultValue = value; 

在自动完成combobox脚本中创建代码后。 您也可以使用html的重置按钮重置。

Answer 14

我难以理解这个错误，并且无论我编码什么都不能修复OnLoad事件（可能在3个小时内）。 最后幸运的是，我浏览了http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/网页（感谢@Dan解决我头痛的问题）并看到了真正的失踪部分不在“OnLoad”上，关于ui定义函数本身。 官方Jquery Ui网页上的标准定义function不包含以编程方式选择的选项。

这是应该添加到定义函数的函数：

 //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; } }); } 

我还生成了另一个function，通过选项文本而不是选项值来改变选择

 //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");