In my search feature, I have implemented an autocomplete div that appears when the user types in a search field. The issue I am facing is that I want the div to disappear when the user clicks outside of it. Here is what I have attempted:
//SHOW THE DIV WHEN INPUT CLICKED
$('#searchbar').focus(function(){
$('#div').show();
});
//HIDE THE DIV WHEN FOCUS LOST
$('#searchbar').on("blur", function(){
$('#div').hide();
});
The problem arises because the autocomplete options within the div include clickable links. When a user clicks on a link, the div disappears as the focus from the input field is lost.
Is there a way to somehow group the div with the input field so that they both remain 'focused' when the input is active or the div is clicked?
Thank you for your help!
EDIT: Below is my HTML code
<div class="appBar">
<table class="abTable">
<tr>
<td><b><a href="index.php"><span style="color:white;">gelDB</span></a></b></td>
<td><input id="sbar" type="text" name="searchBar" class="searchBar" placeholder="Search for entries..." /></td>
<td>
<a href="entry.php"><img class="navButton" alt="" src="images/btn_new.png" style="width: 50px; height: 50px" /></a>
<a href="browse.php"><img class="navButton" alt="" src="images/btn_browse.png" style="width: 50px; height: 50px" /></a>
<a href="protocols.php"><img class="navButton" alt="" src="images/btn_proto.png" style="width: 50px; height: 50px" /></a>
<img class="navButton" alt="" src="images/btn_permis.png" style="width: 50px; height: 50px" />
</td>
<td>
<button class="menuButton"></button>
</td>
</tr>
<div class="menuButtonDiv"></div>
</table>
</div>
</head>
<br/>
<body>
<div id="acd" class="autoCompleteDiv">No results. Try searching something else.<hr></div>
Here is a visual representation of the issue I'm facing: