Question

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

Answer 1

You can do it by using setTimeout like this so that there is just enough time for the click on the span to register.