How to change textbox value on select event with autocomplete (jQuery UI)

Question

Why won't #input-myBox clear when I select an item? It seems autocomplete is preventing my .val('') to work so how can I workaround this?

$("#input-myBox").autocomplete({
    source: response,
    minLength: 1,
    select: function(event, ui) {
                var selectedObj = ui.item;
                $("#input-myBox").appendTo(".foo");
                $("#input-myBox").val('');  
    }
});

Answer 1

event.preventDefault() stops autocomplete setting the field.

select: function (event, ui) {
  event.preventDefault();
  var selectedObj = ui.item;
  $("#input-myBox").appendTo(".foo");
  $("#input-myBox").val('');  
}

Answer 2

Also, you can use 'return false;' to stop autocomplete setting the field.

select: function (event, ui) { 
    var selectedObj = ui.item;        
    $("#input-myBox").appendTo(".foo");
    $("#input-myBox").val('');  
    return false;
}

Answer 3

If you just want to substitute the selected value for something else:

select: function( event, ui ) {
  ui.item.value = substituteWord(ui.item.value);
}