CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
el_pup_le
el_pup_le

Reputation: 12189

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

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

Upvotes: 19

Views: 29499

Answers (5)

HerrimanCoder
HerrimanCoder

Reputation: 7228

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

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

Upvotes: 4

kd12
kd12

Reputation: 1351

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

Upvotes: 9

el_pup_le
el_pup_le

Reputation: 12189

event.preventDefault() stops autocomplete setting the field.

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

Upvotes: 49

gdoron
gdoron

Reputation: 150293

There is inconsistent with your code:

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

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

Upvotes: 0

psx
psx

Reputation: 4048

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

This might be your problem :)

Edit: rob beat me to it

Upvotes: 1

Related Questions