Указание на функцию фокуса

Question

Что я пытаюсь выполнить? : Я предоставил строку поиска, если вы наберете что-то, это автоматически приведет вас к результатам. Нажимая на результаты, пользователь будет отправлен на страницу справки. Я хочу предоставить функциональность, которая, если пользователь нажимает за пределы поля результата или ввода, результат исчезнет.

Что нужно? : Html, css, js, php и ajax

Проблема? : Я могу видеть результаты, но у меня проблема с функцией фокуса в jquery. (Я не знаю много о jquery). Если я нажму на тело моей веб-страницы, элемент результата не исчезнет.

Половина успеха! : Ну, я попробовал фокус и функцию focusin на поле ввода, элемент результата смог исчезнуть, но затем, если я нажму на любой элемент списка (результаты), он прекратил брать меня на ссылочную страницу, так как я использовал фокус с полем ввода

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() ; 
    } 

у меня есть файл search.php здесь код

<?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 '<a href="' . $query_row['Artists'] . '.php" id="search_results_items">'.$Artists.'</a>' ; 
     echo '</ul>'; 
    } 
    } else {echo "No results found!";} 
} 
} 
    } 

Любые предложения по функциональности я хочу поставить?

Answer 1

Вы можете попробовать это:

$("#search_bar_input").blur(function() { 

}); 

Answer 2

Попробуйте так:

$(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(); 
    } 
});