Очистить поле формы после выбора автозаполнения пользовательского интерфейса jQuery
-
23-09-2019 - |
Вопрос
Я разрабатываю форму и использую автозаполнение jQuery UI.Когда пользователь выбирает опцию, я хочу, чтобы выбор появлялся в диапазоне, добавленном к родительскому элементу. <p>
ярлык.Затем я хочу, чтобы поле очистилось, а не было заполнено выделением.
У меня диапазон отображается нормально, но я не могу очистить поле.
Как отменить действие выбора по умолчанию в jQuery UI Autocomplete?
Вот мой код:
var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
source: availableTags,
select: function(){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
}
});
Просто делаю $(this).val("");
не работает.Что бесит, так это то, что почти та же самая функция работает нормально, если я игнорирую автозаполнение и просто выполняю действие, когда пользователь вводит запятую как таковую:
$('[id^=item-tag-]').keyup(function(e) {
if(e.keyCode == 188) {
var newTag = $(this).val().slice(0,-1);
$(this).val('');
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
}
});
Реальный конечный результат — заставить автозаполнение работать с несколькими вариантами выбора.Если у кого-то есть какие-либо предложения по этому поводу, они будут приветствоваться.
Решение
Добавлять $(this).val(''); return false;
до конца твоего select
функция очистки поля и отмены события :)
Это предотвратит обновление значения.Вы можете увидеть, как это работает около строки 109 здесь.
Код там специально проверяет ложь:
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
Другие советы
Вместо возврата false вы также можете использовать event.preventDefault().
select: function(event, ui){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
event.preventDefault();
}
return false необходим в обратном вызове select, чтобы очистить поле.но если вы хотите снова контролировать поле, т.е.установите значение, вам нужно вызвать новую функцию, чтобы выйти из пользовательского интерфейса.
Возможно, у вас есть быстрое значение, например:
var promptText = "Enter a grocery item here."
Установите его как значение элемента.(в фокусе мы установили значение '').
$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
source: availableTags,
select: function(){
$(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
foo.resetter(); // break out //
return false; //gives an empty input field //
}
});
foo.resetter = function() {
$("selector").val(promptText); //returns to original val
}
Это хорошо работает для меня.
После выбора события я использовал изменение события.
change:function(event){
$("#selector").val("");
return false;
}
Я новичок!
Попробуй это
select: function (event, ui) {
$(this).val('');
return false;
}
Я просто решил это, заставив потерять фокус:
$('#select_id').blur();
printResult();