-1

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

它做了什么？: 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() ;
    }

我有一个文件 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!";}
 }  
 }
  }

关于我想要提供的功能有什么建议吗？

4

2 回答 2

0

试试这个： 

$(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();
    }
});
于 2017-02-16T12:00:27.973 回答
0

你可以试试这个：

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

});
于 2017-02-16T11:46:51.853 回答