Ajax 关于focusout函数的建议

我想要完成的是什么 我已经提供了一个搜索栏，如果你键入的东西，它会自动提示你的结果。通过点击结果，用户将进入参考页面。我想提供一个功能，如果用户在结果或输入框外单击，结果将消失

花了多少钱 Html、css、js、php和ajax

有问题吗 我可以看到结果，但我对jquery中的focusout函数有问题。（我对jquery了解不多）如果我点击我的网页主体，结果元素不会消失

成功一半！： 我在输入框上尝试了focusout和focusin函数，结果元素能够消失，但是如果我点击任何列表项（结果），它就不再把我带到参考页，因为我在输入框中使用了focusout

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

jquery:
$（文档）.ready（函数（）{
$（'#搜索栏_输入'）。聚焦（函数（）{
$（'#results'）.css（'display'，'block'）；
});
} );
$（文档）.ready（函数（）{
$（'search_bar_input'）.focusout（函数（）{
$（this.val（“”）；
$（'#results'）.css（'display'，'none'）；
} );    
} );
Html:
说实话，我不知道是Ajax还是什么
函数findMatch（）{
var-xmlhttp；
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}else{xmlhttp=newActivexObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“结果”）.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!";}
 }  
 }
  }

您可以尝试以下方法：

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

});

试着这样做：

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

Bro与focusout相同，它不工作。工作了一半，我的意思是结果元素消失了，但是如果我点击任何列表项，它就不再带我去页面，我想去。如果我尝试在#results元素上搜索一个事件，focusout或blur不起作用。谢谢你的努力，但是现在我丢失了我得到的结果。你使用了click事件，因此我停止了得到结果，我尝试的是使用TAB键并聚焦输入框，然后我得到了结果，但在单击身体上的任何地方之后，我停止了得到结果。