Очистить поле формы после выбора для автозаполнения jQuery UI

97

Я разрабатываю форму и использую автозаполнение jQuery UI. Когда пользователь выбирает параметр, я хочу, чтобы выделение появилось в диапазоне, добавленном к родительскому <p>тегу. Затем я хочу, чтобы поле очищалось, а не заполнялось выделением.

У меня диапазон отображается нормально, но я не могу очистить поле.

Как отменить действие выбора по умолчанию для автозаполнения jQuery UI?

Вот мой код:

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

Настоящий конечный результат - получить автозаполнение для работы с множественным выбором. Если у кого-то есть предложения по этому поводу, они будут приветствоваться.

Джон Ф. Хэнкок
источник

Ответы:

182

Добавьте $(this).val(''); return false; в конец своей selectфункции, чтобы очистить поле и отменить событие :)

Это предотвратит обновление значения. Вы можете увидеть, как это работает в строке 109 здесь .

Код там специально проверяет ложь:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
Ник Крейвер
источник
Фантастика! Хотя я чувствую себя глупо. Теперь я знаю, и знание - это половина дела.
Джон Ф. Хэнкок,
Это исправило. Я попытался согласиться, но мне сказали, что я не могу еще 7 минут. Принято. Спасибо.
Джон Ф. Хэнкок,
1
Позвольте мне просто добавить, что как только вы вернете false, вам больше не нужно устанавливать значение самостоятельно (то есть в этом нет необходимости $(this).val('');)
Ури
9
Если кто-то хочет, чтобы в поле ввода вообще отсутствовало какое-либо значение, я считаю, что вызов .val('')все равно должен произойти. Это return false;только предотвратит появление текста выбранного элемента в поле ввода.
Райан
1
Ури неверен, а Райан прав. Вам нужно вернуть false, чтобы предотвратить его обновление с вашим выбором, и вам дополнительно понадобится $ (this) .val (''), если вы хотите очистить его.
mynameistechno
19

Вместо return 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();
}
Пауль Шредер
источник
Подозреваю, что этот метод более эффективен, чем принятый ответ.
dlsso
6

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
}
каптахаб
источник
Привет, у меня был другой вопрос, о сохранении подсказки, я не могу использовать заполнители по техническим причинам. Это было прекрасно, СПАСИБО!
hgolov 07
5

У меня это хорошо работает.

После выбора события я использовал изменение события.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

Я новичок!

Сильвана Сали Виана
источник
0

Попробуй это

select: function (event, ui) {
    $(this).val('');
    return false;       
}
ImBhavin95
источник
0

Я просто решил, что заставляет терять фокус:

$('#select_id').blur();
printResult();
Мирейя Гимено
источник