Clear form field after select for jQuery UI Autocomplete

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

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

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}