I have one input field and one division with span children
<input type="text" id="input" name="input" />
<div id="content">
<span>option 1</span>
<span>option 2</span>
<span>option 3</span>
<span>option 4</span>
</div>
I'm trying to make a jQuery simulation of select drop-down list.
$('#content').hide();
$('#input').focus(function(){
$('#content').show();
});
$('#content span').click(function(){
$('#input').val($(this).html())
$('#content').hide();
});
Everything's works fine but I just can't figure it out how to hide div on inputs blur. If I put this inside jQuery
$('#input').blur(function(){
$('#content').hide();
});
then I'm unable to click on span element
