Question

我想要完成什么？：我提供了一个搜索栏，如果您输入内容，它会自动提供结果。通过单击结果，用户将被带到参考页面。我想提供一种功能，如果用户在结果或输入框外部点击，结果将会消失。

需要做什么？： Html，css，js，php和ajax

问题？：我能够看到结果，但我在jquery中有焦点函数的问题。（我对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

试试这个：

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

关注焦点功能的Suggenstion

2 个答案: