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

Я розробляю форму та використовую jQuery UI Autocomplete. Коли користувач вибирає параметр, я хочу, щоб вибір вийшов на проміжок, доданий до батьківського <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>");
    }
});

Справжнім кінцевим результатом є отримання автозаповнення для роботи з декількома виборами. Якщо у когось є якісь пропозиції щодо цього, вони будуть раді.

Додайте $(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 потрібно в межах обраного зворотного виклику, щоб спорожнити поле. але якщо ви хочете знову керувати полем, тобто встановити значення, вам доведеться викликати нову функцію, щоб вийти з інтерфейсу користувача.

Можливо, у вас є таке швидке значення, як:

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();