Как установить значение по умолчанию с помощью JQuery Auto Complete Combobox?

Question

При использовании автозаполнения jquery ui в поле со списком , вы можете установить значение по умолчанию для поля со списком?

Answer 1

Я попытался ответить на этот вопрос так, как я бы сделал это в моем собственном проекте.

Я прочитал исходный код демонстрации со страницы, которую вы разместили. В коде jquery, который генерирует комбинированный список автозаполнения, я добавил одну строку кода, которая обрабатывается при создании комбинированного списка, который считывает выбранное значение из вашего элемента «select». Таким образом, вы можете программно установить значение по умолчанию (как обычно, если вы не используете комбинированный список автозаполнения)

Вот одна строка, которую я добавил:

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

Answer 2

На основе Ответ Матье Стила вместо использования этого:

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

Я использую это:

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

Виджет теперь можно использовать повторно и СУХОЙ:)

Answer 3

Этого можно добиться, отредактировав следующую инструкцию автозаполнения:

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

Answer 4

Ответ № 1 очень близок, но вы не можете жестко закодировать идентификатор элемента, если хотите сохранить универсальную функцию. Добавьте эту строку и наслаждайтесь!

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

Answer 5

добавить метод в сценарий комбинированного списка jquery

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

Answer 6

Я подправил ответы здесь, чтобы использовать переменную выбора, уже определенную в выпадающем списке, чтобы найти выбранную опцию и использовать ее. Это означает, что он является общим для любого элемента, для которого вы определили комбинированный список (с использованием идентификатора, класса или селектора), и будет работать также для нескольких элементов.

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

Надеюсь, это кому-нибудь поможет!

Answer 7

Я поставил эту ошибку в тупик и не могу исправить ее событие OnLoad, как бы я ни кодировал (вероятно, на 3 часа). Наконец, к счастью, я зашел на http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ веб-страницу (спасибо @Dan за решение моей головной боли) и увидел, что настоящая недостающая часть не в «OnLoad», а в самой функции определения пользовательского интерфейса. Функция определения стандарта на официальной веб-странице 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");

Answer 8

Добавить ниже одной строки кода перед строкой "this._on( this.input, {"

this.input[0].defaultValue = value;

после создания кода в скрипте автозаполнения. Вы также можете сбросить с помощью кнопки сброса HTML.

Answer 9

У меня есть ответ, который сработал для моей реализации выпадающего списка JQuery UI. Где-то посередине кода было это:

.val(value)

Я изменил его на:

.val(select.val())

и presto, начальное значение основного текстового поля появилось. Мне кажется, это должно быть по умолчанию, но что я знаю?

Answer 10

Вместо этого я использовал приведенную ниже строку кода, просто еще один способ достижения того же результата:)

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