Как Вы устанавливаете значение по умолчанию с jQuery автоматическое полное поле комбинированного списка?
При использовании jQuery ui автоматически заполняют поле комбинированного списка, можно ли установить значение по умолчанию для поля комбинированного списка?
8 ответов
Я попытался ответить на этот вопрос так же, как и в моем собственном проекте.
Я прочитал исходный код демонстрации со страницы, которую вы разместили. В коде 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> </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);
Вызовите метод option , чтобы установить значение поля после его инициализации.
$('#combo').autocomplete( "option" , optionName , [value] )
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);
Ответ №1 очень близок, но вы не можете жестко запрограммировать идентификатор элемента, если хотите, чтобы функция оставалась универсальной. Добавьте эту строчку и наслаждайтесь!
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
Я настроил здесь ответы, чтобы использовать переменную выбора, уже определенную в поле со списком, чтобы найти выбранный вариант и использовать его. Это означает, что он является общим для любого элемента, для которого вы определили поле со списком (используя идентификатор, класс или селектор), и также будет работать для нескольких элементов.
input.val(select.find("option:selected").text());
Надеюсь, это кому-то поможет!
input.val( $(select).children("option:selected").text());
На основе ответа Мэтью Стила вместо этого:
input.val( $("#combobox option:selected").text());
Я использую это:
input.val( $(select).find("option:selected").text());
Виджет теперь можно использовать повторно и СУХОЙ :)