I am using this: http://www.useful-dates.com/search/
How should the script be written to say, 1. When the user clicks the input, the scrolled div is shown. 2. When the user click outside of the scrolled div, the scrolled div hides.
Like this, but i have had no luck re-writting the script: http://rob-bell.net/static/ddlist.html
Iv searched and tried all kinds of things on the net and no luck, please help?
The easiest way of doing this is when your script is triggered to display the list (the scrolled div) it creates a trigger to the click event on the document itself aswell. Something like this:
By using the
one()
the code to hide the scroll list will only be executed once, so it wont run each time the user is clicking the document. But remember that it will also trigger on clicks inside your scrolling div, if you dont want that stop the propagation of the click event like this:If you look at the source code of your example ;
This hides the div when there has been a click on the document.
Give you div an ID like so:
<div id="searchResults" style="height:95px;width:290px;overflow:scroll;overflow-x:hidden;margin: 2px 0 0 0;">
and then:
Alternatively and maybe a better solution is to use
focus
andblur
:This will show the results when the focus is put onto the input, and removes it when you 'leave' the input.
UPDATE
With the autocomplete plugin, you can perform a task after the item has been selected like this: