Is there a way to hide the search result when the input is empty?
While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then delete it, the result should disappear.
A big thank you to anyone who can provide the solution!
The element
<div id="result"></div>This is the CSS code for my search implementation:
.content{
width:275px;
}
#searchid
{
width:275px;
border:solid 1px #000;
padding:10px;
font-size:14px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#result
{
position: absolute;
width:275px;
padding:10px;
display:none;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:15px;
height:50px;
}
.show:hover
{
background:lightgrey;
color:#FFF;
cursor:pointer;
}
Here's the HTML code for the search input box:
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search"/>
<div id="result"></div>
</div>
This is how my search results are displayed:
<div class="show" align="left">
<span class="name"><a href="/sheridan/page/?p=' . $rowsTitle['id'] . '">' . $rowsTitle['title'] . '</a> ' . $label . "<br>".
</div>
Below is the JQuery script used to retrieve search information:
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "GET",
url: "/sheridan/script/search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
Note: I unintentionally omitted the JQuery function used to extract information from the database in the earlier explanation.