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

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

• javascript
• jquery
• jquery-ui
• autocomplete

3 Answers 3

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

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.

Found the solution for me. You have to trigger the blur and close on the "change".

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