17

使用jquery ui 自动完成 组合框时，可以为组合框设置默认值吗？

4

14 回答 14

24

我尝试以我在自己的项目中的方式回答这个问题。

我从您发布的页面中阅读了演示源代码。在生成自动完成组合框的 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>&nbsp;</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 的回答，而不是使用这个：

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

我用这个：

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

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

于 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

我在这里调整了响应以使用组合框已经定义的选择变量来查找所选选项并使用它。这意味着它对于您定义组合框的任何元素都是通用的（使用 id、class 或 selector ），并且也适用于多个元素。

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

希望这对某人有帮助！

于 2010-07-01T14:30:51.220 回答
1

将方法添加到 jquery 组合框脚本

setValue: function(o) {            
    $(this.element).val(o);
    $(this.input).val($(this.element).find("option:selected").text());            
}
于 2011-12-20T11:52:35.127 回答
0

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

$('#combo').autocomplete( "option" , optionName , [value] )
于 2010-05-04T04:17:57.017 回答
0

可能这会帮助你

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

于 2010-05-09T22:45:34.077 回答
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

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

.val(value)

我将其更改为：

.val(select.val())

很快，底层文本框的初始值就出现了。在我看来，这应该是默认功能，但我知道什么？

于 2013-04-14T00:42:56.400 回答
0

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

this.input[0].defaultValue = value;

在自动完成组合框脚本中创建代码之后。您也可以使用 html 的重置按钮进行重置。

于 2014-01-21T05:40:01.707 回答
0

我难住了这个错误，无论我编写什么代码都无法修复它（可能需要 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");
于 2015-04-04T12:39:24.680 回答
-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 回答