Как установить значение по умолчанию с помощью jQuery Auto Complete Combobox?
https://stackoverflow.com/questions/2749721
-
02-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Когда используешь Автозаполнение jQuery UI поле со списком, Можете ли вы установить значение по умолчанию для ComboBox?
Решение
Я попытался ответить на это так, как я бы сделал это в своем собственном проекте.
Я прочитал демонстрационный исходный код со страницы, которую вы разместили. В коде jQuery, который генерирует автозаполнение ComboBox, я добавил одну строку кода, которая обрабатывается при создании ComboBox, которая считывает выбранное значение из вашего элемента «SELECT». Таким образом, вы можете программно установить значение по умолчанию (как обычно, если бы вы не использовали AutoComplete Combobox)
Вот одна строка, которую я добавил:
input.val( $("#combobox option:selected").text());
Легко и просто. Он устанавливает значение ввода в текстовое значение выбранного элемента из #combobox. Естественно, вы захотите обновить элементы идентификатора, чтобы соответствовать вашему индивидуальному проекту или странице.
Вот в контексте:
(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);
Другие советы
На основе Матье Стил ответ, вместо использования этого:
input.val( $("#combobox option:selected").text());
Я использую это:
input.val( $(select).find("option:selected").text());
Виджет теперь многоразовый и сухой :)
Ответ № 1 очень близок, но вы не можете жестко кодировать идентификатор элемента, если хотите сохранить функцию общей. Вместо этого добавьте эту строку и наслаждайтесь!
input.val(jQuery("#"+select.attr("id")+" :selected").text() );
Вы можете достичь этого, редактируя следующее утверждение авто-заполнения:
value = selected.val() ? selected.text() : "Select Institution";
Я настроил ответы здесь, чтобы использовать переменную Select, уже определенную ComboBox, чтобы найти выбранную опцию и использовать ее. Это означает, что это общее, для которого когда -либо элемент определил ComboBox (используя ID, класс или селектор) и будет работать также для нескольких элементов.
input.val(select.find("option:selected").text());
Надеюсь, это кому -то поможет!
Добавить метод в сценарий jquery combobox
setValue: function(o) {
$(this.element).val(o);
$(this.input).val($(this.element).find("option:selected").text());
}
Вызовать option Метод для установки значения коробки после того, как вы его инициализировали его.
$('#combo').autocomplete( "option" , optionName , [value] )
Может быть, это поможет вам
input.val( $(select).children("option:selected").text());
Вместо этого я использовал ниже строку кода, просто еще один способ достижения того же результата :)
$('option:selected', this.element).text()
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);
У меня есть ответ, который работал для моей реализации JQUERY UI ComboBox. Где -то в середине кода было следующее:
.val(value)
Я изменил это на:
.val(select.val())
и Presto появилось начальное значение базового текстового поля. Мне кажется, что это должно быть функциональности по умолчанию, но что я знаю?
Добавьте ниже одну строку кода перед " this._on( this.input, { " линия
this.input[0].defaultValue = value;
После создания кода в сценарии ComboBox автозаполнения. Вы также можете сбросить кнопку сброса HTML.
Я оторвался от этой ошибки и не могу исправить это событие на загрузке, что бы я ни кодировал (вероятно, на 3 часа). Наконец, к счастью, я пережил http://www.onemoretake.com/2011/04/17/a-better-jquery-ui-combo-box/ Веб -страница (спасибо за @Dan для решения моей головной боли) и увидела, что реальная недостающая часть не находится на «Onload», на самой функции определения пользовательского интерфейса. Функция определения Standart на официальной веб -странице пользовательского интерфейса jQuery не содержит программно выбирать опцию.
Вот функция должна добавить функцию определения:
//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;
}
});
}
Вы можете использовать эти функции на нагрузке или другой функции как:
$("#yourComboBoxID").combobox("setValue", "Your Option Value");
или же
$("#yourComboBoxID").combobox("setValueText", "Your Option Text");
