I'm implementing a "auto suggestion feature". This means:
- input element gets focus -> display suggestions
- input element looses focus -> hide suggestions
But if the user want to select an option via mouse, the click event is not firing because the blur event fires earlier and hides the clickable element.
Here is the fiddle: http://jsfiddle.net/km8c0ft1/
Here is some example code: js:
$('#test').blur(function() {
$('#dropdown').css("display", "none");
});
$('#test').focus(function() {
$('#dropdown').css("display", "inline");
});
html:
<input id="test" />
<input />
<input />
<ul id="dropdown" style="display: none">
<li><a onclick="alert('option 1 selected')">option 1</a></li>
<li><a onclick="alert('option 2 selected')">option 2</a></li>
<li><a onclick="alert('option 3 selected')">option 3</a></li>
</ul>
I understand the problem. But what is the best practice to solve this Problem?
I can implement the setTimeout
Function to wait some ms until i hide the menu. But this feels like a hack and not like a clean solution.