I have an HTML form element that I want to use to create a dynamic drop-down list of options with auto-suggestions as people type.
<form action="" id="clientSearchForm" autocomplete="off">
<input id="searchInput" onkeyup="updateResults();" onfocusout="clickAway();" name="search" placeholder="" type="text">
</form>
The updateResults() function generates a div below this section with clickable matching entries as they type. I want to create a clickAway() function onfocusout to delete whatever someone has written in the text field if they don't click one of the options presented to them. Basically I want them to know that we're not going to save the data unless they choose one of the pre-selected options.
However I can't seem to come up with a way to NOT erase once they click on an option in the results div.
I've tried to use some IF conditional statements in the onfocusout function, but the onfocusout event always happens before any events associated with the results click event.
function clickAway() {
$("#searchInput")[0].value = "";
updateResults();
}
How can I delete the content of this form input field for people clicking away to fill out the rest of the form, without also erasing it when the action stealing focus is the correct action of clicking on a result?
