如何使用jquery auto complete combobox设置默认值？ [英] How do you set a default value with jquery auto complete combobox?

问题描述

使用 jquery ui自动填充 组合框时，可以你设置组合框的默认值？

When using the jquery ui autocomplete combobox, can you set a default value for the combobox?

推荐答案

我试着回答这个方式，我会在自己的项目。

I tried answer this in the way that I would do it in my own project.

我通过您发布的页面读取演示源代码。在生成自动完成组合框的jquery代码中，我添加了一行代码，在创建组合框时处理，从select元素读取所选的值。这种方式你可以通过编程方式设置默认值（就像你通常不使用自动完成组合框）

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)

这是我添加的一行：

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

简单。它将输入的值设置为从#combobox选择的元素的文本值。当然，您需要更新id元素以匹配您的单个项目或页面。

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.

这里是在上下文中：

(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);

这篇关于如何使用jquery auto complete combobox设置默认值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！