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

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

у меня есть пядь появляется просто отлично, но я не могу получить поле, чтобы очистить.

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

вот мой код:

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

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

5 86
jquery jquery-ui-sortable jquery-ui-autocomplete

5 ответов:

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

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

код там проверяет ложь конкретно:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
162

вместо возврата false вы также можете использовать событие.preventDefault ().

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}
19

return false требуется в пределах select callback, чтобы очистить поле. но если вы хотите снова управлять полем, т. е. установить значение, вам нужно вызвать новую функцию, чтобы вырваться из пользовательского интерфейса.

возможно, у вас есть значение подсказки, например:

var promptText = "Enter a grocery item here."

установите его как val элемента. (в фокусе мы ставим на"). 

$("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
}
6

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

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

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

Я новичок!

3

Попробуй Такое

select: function (event, ui) {
    $(this).val('');
    return false;       
}
0