CODEWITHSUNDEEP
javascriptautocompletefocus
Psihius
Psihius

Reputation: 143

How to make input not to lose focus when clicking on scrollbar in suggestion list

I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon. I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!

So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?

P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.

Upvotes: 2

Views: 2388

Answers (1)

Kristian
Kristian

Reputation: 21830

I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.

After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:

  1. upon the opening of the list, add a click event to the document that checks to see if the click is not on in the active input, and not on the active list. If this is true and the click is in fact on a non-listy part of the document, then close it.
  2. add an event to each list item in the suggest list (when the list is open only) that selects the value and closes the list.
  3. add an keydown event to the input itself so if the user hits enter, it changes the value and closes the list.

Upvotes: 2

Related Questions