I have an input field, where I try to make autocomplete suggestion. Code looks like
<input type="text" id="myinput">
<div id="myresults"></div>
On input's blur()
event I want to hide results' div:
$("#myinput").live('blur',function(){
$("#myresults").hide();
});
When I write something into my input I send request to server and get json response, parse it into ul->li structure and put this ul to my #myresults
div.
When I click to this parsed li element I want to set value from li to input and hide #myresults
div
$("#myresults ul li").live('click',function(){
$("#myinput").val($(this).html());
$("#myresults").hide();
});
Everything is going good, but when I click to my li blur()
event fires before click()
and input's value don't get li's html.
How can I set up click()
event before blur()
?
Listen to mousedown
instead of click
.
The mousedown
and blur
events occur one after another when you press the mouse button, but click
only occurs when you release it.
You can preventDefault()
in mousedown
to block the dropdown from stealing focus. The slight advantage is that the value will be selected when the mouse button is released, which is how native select components work. JSFiddle
$('input').on('focus', function() {
$('ul').show();
}).on('blur', function() {
$('ul').hide();
});
$('ul').on('mousedown', function(event) {
event.preventDefault();
}).on('click', 'li', function() {
$('input').val(this.textContent).blur();
});