JQueryUI Autocomplete - field blur after selection

I would like to be able to blur the field after selecting a value from the drop-down list. I'm currently looking for an auto-complete object in 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","");
        });
+5
source share
3 answers

You can use the close method to blur 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", "");
});
+10
source

Autocomplete has a select event that fires when you select something from the drop-down list. In this case, you can call .autocomplete ("close") on your input to close the drop-down menu.

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

Familiarity with the documents works wonders :)

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

(, , ..) , .

EDIT:

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

, .

+1

Found a solution for me. You must cause a blur and close 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","");
        });
0
source

All Articles