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?

Answer 1

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 2

There is inconsistent with your code:

$("#input-mybox").appendTo(".foo");
$("#input-myBox").val('');  

"#input-myBox" || "#input-mybox" ???

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

Answer 4

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 5

Is it #input-mybox (lowercase b) or #input-myBox (uppercase b) ?

This might be your problem :)

Edit: rob beat me to it