초점 기능이있는 Suggenstion

Question

내가 성취하고자하는 것은 무엇입니까? : 검색 창을 제공했습니다. 검색어를 입력하면 자동 검색 결과가 자동으로 나타납니다. 결과를 클릭하면 사용자는 참조 페이지로 이동합니다. 사용자가 결과 또는 입력 상자 바깥을 클릭하면 결과가 사라지는 기능을 제공하고 싶습니다.

무엇이 필요합니까? : html, css, js, php 및 아약스

문제가 있습니까? : 결과를 볼 수 있지만 jquery에서 focusout 함수에 문제가 있습니다. (jquery에 대해 많이 알지 못합니다.) 웹 페이지의 본문을 클릭하면 결과 요소가 사라지지 않습니다.

반 성공! : 글쎄, 입력 상자에 focusout 및 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

이 너무보십시오 : 대한 focusOut로

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