Suggenstion on focusout function - ajax

Question

What I'm trying to accomplish? :
I have provided a search bar, if you type something it will autosuggest you the results. By clicking on the results user will be taken to the reference page. I wanna provide a functionality that if a user clicks outside the result or input box, the result will get disappeared.
What did it take? :
Html, css, js, php and ajax
Problem? :
I am able to see the results but I have problem with focusout function in jquery. ( I don't know much about jquery ) If I click on the body of my webpage, the result element doesn't get disappeared.
Half success! :
Well I tried focusout and focusin function on input box, the result element was able to get disappeared but then if I click on any list-item (results) it stopped taking me to the reference page since I used focusout with input box
jquery:
$(document).ready(function(){
$('#search_bar_input').focusin(function(){
$('#results').css('display','block') ;
});
} );
$(document).ready(function(){
$('#search_bar_input').focusout(function() {
$(this).val('') ;
$('#results').css('display','none') ;
} );
} );
Html :
<form id="search_bar" name="search">
<input type="text" placeholder="Search a Song or Artist..." name="search_text" onkeyup="findMatch()" id="search_bar_input"/>
</form>
<div id="results">
</div>
Ajax or something I don't know to be honest. :
function findMatch() {
var xmlhttp ;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest() ;
} else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText ;
}
}
xmlhttp.open('GET', 'include/search.php?search_text='+document.search.search_text.value, true) ;
xmlhttp.send() ;
}
I have a file search.php here is the code
<?php
if(isset($_GET['search_text']) ) {
$search_text = $_GET['search_text'] ;
}
if(!empty($search_text)) {
if(mysql_connect('localhost', 'root', '' ) ) {
if(mysql_select_db('getthetrack.com')) {
$query = "SELECT `Artists` FROM `artist's name` WHERE `Artists` LIKE '".mysql_real_escape_string($search_text)."%' ";
$query_run = mysql_query($query) ;
if(mysql_num_rows($query_run)){
while($query_row = mysql_fetch_assoc($query_run)) {
echo '<ul class="search_results">';
$Artists = '<li class="search_results_items">'.$query_row['Artists'].'</li>' ;
echo ''.$Artists.'' ;
echo '</ul>';
}
} else {echo "No results found!";}
}
}
}
Any suggestions on the functionality I wanna deliver?

Answer 1

You can try this:
$( "#search_bar_input" ).blur(function() {
});

Answer 2

Try this so:
$(document).click(function (e)
{
var container = $("#results");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});