Как установить значение по умолчанию с помощью jquery auto complete combobox?

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

Ответы

Ответ 1

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

Я прочитал демо-исходный код со страницы, которую вы опубликовали. В коде jquery, который генерирует комбобокс автозаполнения, я добавил одну строку кода, которая обрабатывает, когда создается combobox, которая считывает выбранное значение из вашего элемента "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);

Ответ 2

Основываясь на ответе Матье Стил, вместо этого:

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

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

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

Виджет теперь многоразовый и DRY:)

Ответ 3

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

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

Ответ 4

Это можно сделать, отредактировав следующий оператор автокомплексора:

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

Ответ 5

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

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

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

Ответ 6

добавить метод в jquery combobox script

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

Ответ 7

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

Ответ 8

Вызвать метод option, чтобы установить значение поля после его инициализации.

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

.val(value)

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

.val(select.val())

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

Ответ 13

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

this.input[0].defaultValue = value;

после создания кода в автозаполнении combobox script.  Вы также можете reset с помощью кнопки reset html.

Ответ 14

Я столкнулся с этой ошибкой и не могу исправить это событие OnLoad независимо от того, что я закодировал (возможно, на 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");