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.

score 187 · Accepted Answer · edited Jul 17 '12 at 01:50

187

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

edited Jul 17 '12 at 01:50

Jay Prall

5,295
5
49
79

answered Apr 01 '10 at 16:24

Nick Craver

623,446
136
1,297
1,155

1

Let me just add that once you return false you no longer need to set the value yourself (i.e. no need for `$(this).val('');`) – Uri Sep 07 '11 at 10:06
9

If one wants the input field to be clear of any value at all, I believe a call to `.val('')` must still occur. The `return false;` will only prevent the selected item's text from appearing in the input field. – Ryan Lewis Oct 19 '11 at 09:37
1

Uri is incorrect and Ryan is correct. You need to return false to prevent it from updating with your selection, and you additionally need $(this).val('') if you want to clear it out. – mynameistechno Dec 16 '11 at 21:34
return false did it for me. I had it working such that if a certain condition was met, it would do stuff and blank out the value, and if false it would do different stuff and blank the value. Only the "true" condition actually blanked the value. It was maddening to finally find I can just return false to prevent it from ever updating in the search field. Thanks! – notaceo Apr 05 '14 at 01:41
they should have documented that the select function did not override their select function. – r3wt Jan 30 '16 at 13:46

score 23 · Answer 2 · answered May 29 '12 at 15:21

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

Silvana Saly Viana · Answer 3 · 2013-10-27T13:32:53.127

6

It works well for me.

After select event,I used event change.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

I'm a beginner!

edited Oct 27 '13 at 13:32

answered Oct 27 '13 at 13:26

Silvana Saly Viana

61
1
2

score 6 · Answer 4 · edited Jun 10 '12 at 14:02

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
}

score 1 · Answer 5 · answered Jan 09 '17 at 10:03

1

Try This

select: function (event, ui) {
    $(this).val('');
    return false;       
}

answered Jan 09 '17 at 10:03

ImBhavin95

1,494
2
16
29

score 0 · Answer 6 · edited Jan 24 '19 at 13:58

0

I just solved it forcing to lose focus:

$('#select_id').blur();
printResult();

edited Jan 24 '19 at 13:58

Alex Romanov

11,453
6
48
51

answered Jan 24 '19 at 13:51

Mireia Gimeno

1

Clear form field after select for jQuery UI Autocomplete

6 Answers6

Linked