Можно ли запретить бесплатный ввод текста в виджетах автозаполнения пользовательского интерфейса JQuery?
Например, я хочу, чтобы пользователю было разрешено выбирать из списка элементов, представленных в списке автозаполнения, и не хочу, чтобы они могли писать какой-то случайный текст.
Я ничего не видел в демо/документах, описывающих, как это сделать.
http://jqueryui.com/demos/autocomplete/
Я использую автозаполнение, подобное этому
$('#selector').autocomplete({
source: url,
minlength: 2,
select: function (event, ui) {
// etc
}
Один из способов - использовать дополнительную проверку на отправке формы (если вы используете форму), чтобы выделить ошибку, если текст не является допустимым.
Другой способ - присоединить к событию автоматического полного изменения, которое будет запущено, даже если параметры не выбраны. Затем вы можете выполнить проверку, чтобы убедиться, что пользовательский ввод находится в вашем списке или отображает ошибку, если это не так.
Согласно документации API, свойство change event ui имеет значение null, если запись не выбрана из списка, поэтому вы можете запретить свободный текст так же просто, как это:
change: function(event,ui)
{
if (ui.item==null)
{
$("#your_input_box").val('');
$("#your_input_box").focus();
}
}
Если вы хотите, чтобы пользователь просто получил элемент из списка, используйте автосообщение автозаполнения.
http://jqueryui.com/demos/autocomplete/#combobox
HTH
Я использовал модуль combobox, который дает вам кнопку "стрелка вниз". Затем во входной тег просто добавьте следующее к тегу ввода прямо вокруг строки 41 (в зависимости от вашей версии combobox http://jqueryui.com/demos/autocomplete/#combobox)
input.attr( "readonly", "readonly" );
Затем добавьте код, чтобы при щелчке пользователем окна ввода он отобразил список.
В моих целях я добавил флаг readonly, который я могу передать в модуль, поэтому, если мне это нужно только для чтения, я могу включить его и выключить.
Старый вопрос, но здесь:
var defaultVal = '';
$('#selector').autocomplete({
source: url,
minlength: 2,
focus: function(event, ui) {
if (ui != null) {
defaultVal = ui.item.label;
}
},
close: function(event, ui) {
$('#searchBox').val(defaultVal);
}
});
Параметр combobox работает хорошо, если вы используете список наборов, однако, если у вас есть динамически сгенерированный список через json get, вы можете только фиксировать данные об изменениях.
Полный пример с дополнительными параметрами ниже.
$("#town").autocomplete(
{
select: function( event, ui ) {
$( "#town" ).val( ui.item.value );
return false;
},
focus: function( event, ui ) {
$( "#town" ).val( ui.item.label );
return false;
},
change: function(event, ui) {
if (!ui.item) {
$("#town").val("");
}
},
source: function(request, response) {
$.ajax({
url: 'urltoscript.php',
dataType: "json",
data: {
term : request.term,
country : $("#abox").val() // extra parameters
},
success: function(data) {
response($.map(data,function (item)
{
return {
id: item.id,
value: item.name
};
}));
}
});
},
minLength: 3
, highlightItem: true
});
Как насчет опции mustMatch?
'Если установлено значение true, автообновление будет разрешать только результаты, представленные бэкэнд. Обратите внимание, что недопустимые значения приводят к пустому ящику ввода. '