Switching Focus Between Two Divs and the Webpage

Question

Here is the answer to the question, thanks to @CumminUp07

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 do not believe this is a duplicate to Action on blur except when specific element clicked with jQuery, because the timeout does not work well enough for the functionality I desire, nor does it allow you to ensure I can click two different divs while keeping one of those two divs open until a different object in the document is selected.

If my understanding is correct, what you're looking for has a few answers here: [Action on blur except when specific element clicked with jQuery](https://stackoverflow.com/questions/4901899/action-on-blur-except-when-specific-element-clicked-with-jquery) — Tyler Roper, Jul 26 '17 at 13:59
Yes, I would like to make the suggestions div appear almost immediately if possible. I am trying the link in the first comment currently. — C. Lightfoot, Jul 26 '17 at 14:01
Wait, I'm confused - Are you looking to open it faster? Or just make sure that it doesn't close when choosing a city? — Tyler Roper, Jul 26 '17 at 14:02
Making sure it doesn't permanently close when choosing a city. If you know a way that doesn't rely on a 200 ms timer, then that would be awesome. — C. Lightfoot, Jul 26 '17 at 14:04

CumminUp07 · Accepted Answer · 2017-07-26T14:18:27.390

3

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').focus();
    $('#search').val($(this).html());

});

edited Jul 26 '17 at 14:18

answered Jul 26 '17 at 14:05

CumminUp07

1,936
1
8
21

score -1 · Answer 2 · answered Jul 26 '17 at 14:10

-1

Maybe it will help you

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

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

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

https://jsfiddle.net/vc15r7qb/

answered Jul 26 '17 at 14:10

Valera Checha

294
4
16

Answers should be informative and provide at least a bare-bones explanation. Consider pointing out what you changed or explaining what you were trying to do. Otherwise, your answer is a game of spot-the-difference. – Tyler Roper Jul 26 '17 at 14:12

Switching Focus Between Two Divs and the Webpage

2 Answers2