jQueryUI Autocomplete - blur field after selection

Question

I would like to be able to blur the field after I select a value from the dropdown. I currently have the autocomplete item searching on focus.

Here is what I have:

            $("#season").autocomplete({  
            source: function( request, response ) {
                    $.getJSON( "search.asp", {
                        term: request.term,
                        type: 'season'
                        }, response );},
            minLength: 0
        }).focus(function(event, ui){
            $(this).autocomplete("search","");
        });

Solution 1

You could use the 'close' method to call blur on the input field:

$("#season").autocomplete({   
   source: function(request, response){      
   $.getJSON("search.asp", {
         term: request.term,
         type: 'season'
      }, response);
   },
   minLength: 0,
   close: function(){
      $(this).blur();
   }}).focus(function(event, ui){
   $(this).autocomplete("search", "");
});

Solution 2

Autocomplete has a select event, which is triggered when you select something from the dropdown list. In that event you can call .autocomplete('close') on your input to close the dropdown.

$("#season").autocomplete({
   source: function(request, response){
      $.getJSON("search.asp", {
         term: request.term,
         type: 'season'
      }, response);
   },
   minLength: 0,
   select: function(){
      $(this).autocomplete('close');
   }
}).focus(function(event, ui){
   $(this).autocomplete("search", "");
});

Familiarizing yourself with the docs does wonders :)

http://jqueryui.com/demos/autocomplete/

The tabs below the example (options, events, methods, etc.), will give you all you need to know.

EDIT:

Try this, works for me but I only tested in Chrome, FF3 and IE8.

$("#season").autocomplete({
   source: function(request, response){
      $.getJSON("search.asp", {
         term: request.term,
         type: 'season'
      }, response);
   },
   minLength: 0,
   select: function(){
      $('#season').autocomplete('close').blur();
   }
}).click(function(event, ui){
   $(this).autocomplete("search", "");
});

Typically, using click instead of focus isn't a great idea.

Comments

[Jesse]

That doesn't work. It still keeps the popup window, that displays the results, open.

[Mechlar]

Modified my answer. Blur doesn't close the dropdown, so we he to call .autocomplete('close') on it after select.

[Jesse]

It now closes and then reopens because the textbox retains focus after the insert of the value.

[Jesse]

That worked. Although, is there anyway to prevent the dropdown from flickering when the close event is triggered?

[Mechlar]

@Jesse, I edited my answer again with a new snippet at the bottom.

[Mechlar]

@Jesse: to get rid of that flicker you would need to not use the focus event. What is happening is when you select an item from the list it by defaults closes the dropdown and add focus back to your input, which in turn reopens the dropdown. using a click event instead of focus would solve this.

[Jesse]

I ended up using the setTimeout function on the focus event with a 300 ms delay to prevent the flicker and called the following function... function showSearch(id) { if ($(id).val() == "") { $(id).autocomplete('search',''); } }

[Uri]

Didn't work for me. Neither did Dale's solution. The input does lose focus, but the options list remains for some reason.

[M-Razavi]

Didn't work for me, The input select the option, nothing wiriten in input. FF75