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.

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