C. Lightfoot C. Lightfoot - 1 year ago 64
jQuery Question

Switching Focus Between Two Divs and the Webpage

I've found this link to be helpful, except that I do not want the suggestions div to disappear after an element is selected in the suggestions div in order to select more suggestions later. I have tried to implement this strategy with the slideUp() and slideDown() jquery functions, but of course that is not as fast as the show() and hide() jquery functions, and trying to speed up the sliding functions ends up stopping the suggestions div from appearing again.
Here is a plunker of what I am currently stuck on:



$('#search').focus(function() {
$('#suggestions').slideDown();
});

$('#search').blur(function() {
$('#suggestions').slideUp();
});

$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#suggestions').slideDown();
$('#search').focus();
});

#search,
#suggestions {
width: 200px;
}

#suggestions {
display: none;
border: 1px solid gray;
border-top: none;
}

#suggestions div:hover {
background-color: #99CCFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
<div>Toronto</div>
<div>Seattle</div>
<div>Dallas</div>
</div>





I am sorry if this is found to be a duplicate.

Answer Source

You can stop the animation from completing and then just show the suggestions

$('#search').focus(function() {
    $('#suggestions').slideDown();
});

$('#search').blur(function() {
        $('#suggestions').slideUp();
});

$('#suggestions div').click( function() {
    $('#suggestions').stop(true,true).show();
    $('#search').val($(this).html());

});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download