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","");
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With