Clear form field after select for jQuery UI Autocomplete

Question

I'm developing a form, and using jQuery UI Autocomplete. When the user selects an option, I want the selection to pop into a span appended to the parent <p> tag. Then I want the field to clear rather than be populated with the selection.

I have the span appearing just fine, but I can't get the field to clear.

How do you cancel jQuery UI Autocomplete's default select action?

Here is my code:

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

Simply doing $(this).val(""); doesn't work. What is maddening is that almost the exact function works fine if I ignore autocomplete, and just take action when the user types a comma as such:

$('[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>");
    }
});

The real end result is to get autocomplete to work with multiple selections. If anybody has any suggestions for that, they would be welcome.

Ory

Answer 1

Add $(this).val(''); return false; to the end of your select function to clear the field and cancel the event :)

This will prevent the value from being updated. You can see how it works around line 109 here.

The code in there checks for false specifically:

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

Liberati

Let me just add that once you return false you no longer need to set the value yourself (i.e. no need for $(this).val('');) – Godard

If one wants the input field to be clear of any value at all, I believe a call to .val('') must still occur. The return false; will only prevent the selected item's text from appearing in the input field. – Bergstein

Uri is incorrect and Ryan is correct. You need to return false to prevent it from updating with your selection, and you additionally need $(this).val('') if you want to clear it out. – Appling

return false did it for me. I had it working such that if a certain condition was met, it would do stuff and blank out the value, and if false it would do different stuff and blank the value. Only the "true" condition actually blanked the value. It was maddening to finally find I can just return false to prevent it from ever updating in the search field. Thanks! – Drida

they should have documented that the select function did not override their select function. – Trantham

Answer 2

Instead of return false you could also use event.preventDefault().

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

Stonedead

Answer 3

return false is needed within the select callback, to empty the field. but if you want to again control the field, i.e. set the value, you have to call a new function to break out of the ui.

Perhaps you have a prompt value such as :

var promptText = "Enter a grocery item here."

Set it as the element's val. (on focus we set to '').

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

Leitao

Answer 4

It works well for me.

After select event,I used event change.

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

I'm a beginner!

Mure

Answer 5

Try This

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

Ingenuous

Answer 6

I just solved it forcing to lose focus:

$('#select_id').blur();
printResult();

Specialistic