Clear text box in Jquery Autocomplete after selection

Question

I want to clear the textbox having Jquery Autocomplete once the user has made the selection.

I tried to clear the field by :

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

But this is not working.I am using jquery-1.6.4 and jquery-ui-1.8.16.

Any Ideas?

Viminal

i noticed your code says "select". Just want to clarify that it's a textbox and not a select box before I offer a solution. – Chicago

@CoreyRS: select is the name of the option you pass to autocomplete to hook the event when the user selects one of the auto-complete choices. – Patagium

Answer 1

The select event occurs before the field is updated. You will have to cancel the event to avoid the field being updated after you have cleared it:

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

Update: As T.J. pointed out below, it's slightly faster to update the value DOM property directly instead of going through val():

select: function(event, ui) {
    this.value = "";
    return false;
}

Deity

+1 Or just this.value = "";, as in their examples. – Patagium

Answer 2

I'm using jQuery UI version 1.8.23 and $(this).val(""); on select event hasn't worked for me, but this did:

$("selector").autocomplete({
    // ...
    close: function(el) {
        el.target.value = '';
    }
});

Tolbert

worked for me, thanks – Propman

Answer 3

Try

select: function(event, ui) {
input.value='';
}

Calle

Answer 4

You may also try this:

$("#your_autocomplete_sub_listview_id").children().addClass("ui-screen-hidden");

which will hide all the autocomplete filtered list upon selecting it.

Stochmal