1

我有一个搜索框，它的第一个开始是一个放大镜图标。单击 ( :focus) 时，它会展开到您可以输入的搜索框。

我的一个朋友帮我写了一个 jQuery 代码，当用户开始在搜索字段中输入时，结果会立即显示在它下面（来自我的 mySQL 数据库），您可以单击它来查看结果。

但是，如果您单击搜索字段，并且 CSS 不再设置为:focusjQuery（让我们调用它们）快速结果，那么显然不要消失 - 因为没有任何东西告诉他们。

我的问题是 - 我怎样才能让它们在搜索框打开时显示并在搜索框不:focus打开时消失。

这是搜索栏的 CSS：

.search_bar input[type="text"] {
position: absolute;
right: 0px;
top: -18px;
    padding: 0 0 0 22px;
    width: 30px;
    height: 54px;
    -webkit-transition: width 0.5s ease-in-out;
}

.search_bar input[type="text"]:focus{
    width: 550px;
    outline: none;
}

这是 jQuery 结果的 CSS（它们生成的空间：

#searchResult {
position: absolute;
z-index: 1;
width: 536px;
right: 20px;
top: 40px;  
text-align: left;
}

这是jQuery：

jQuery(document).ready(function()
    {
        jQuery('#search_bar').keyup(db_search);
    });

    function db_search()
    {
        var searchFor = jQuery('#search_bar').val();
        if (searchFor=="")
        {
            document.getElementById("searchResult").innerHTML="";
            return;
        } 
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("searchResult").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","php/searchFor.php?search="+searchFor,true);
        xmlhttp.send();
    }

如果不清楚，这里有一些静止图像来说明我的问题。

这是不集中的搜索 这是 <code>:focus</code> 开启的时候 这是显示的 jQuery“快速搜索”链接（他们应该这样做） 这是我的问题，当搜索框向后滑动时，结果仍然存在，我想隐藏它们

我试图用这个 CSS 来隐藏它：

.search_bar input[type="text"]:focus + #searchResult {
display: block;
}

到display: block何时:focus在搜索栏上。

#searchResult {
position: absolute;
z-index: 1;
width: 536px;
right: 20px;
top: 40px;  
text-align: left;
display: none;
}

:focus当它不在搜索栏上时隐藏整个 div 及其内容。

但这不起作用，我不知道该怎么做，我对 jQuery/javascript 的了解仍然非常有限，所以如果答案就在于此，是否有人愿意分享答案? 我试图研究 jQuery 中的 hide() 函数，但我不知道将它放在哪里，我认为它会在 if 语句中？

抱歉问了一个很长的问题，我试图尽可能清晰和彻底。

4

3 回答 3

3

尝试将此添加到您的 jQuery 代码中

jQuery('.search_bar').blur(function(){
    jQuery('#searchResult').hide();
});
于 2012-12-06T13:51:01.617 回答
1

在你的 jQuery 代码的末尾添加这个 - （search_bar 是你在 CSS 中的一个类，还是你的 jQuery 代码中显示的一个 id？）

$('.search_bar').blur(function(){
    $('#searchResult').hide();
});
于 2012-12-06T13:52:38.347 回答
1

您可能想看看 jquery .blur() 事件：http ://api.jquery.com/blur/ 。

你可以试试这个（未经测试的）代码：

 jQuery('#search_bar')
     .keyup(db_search)
     .blur(function() { $("#searchResult").hide(); });

说明：当元素失去焦点时，会调用 blur 事件。在这种情况下，用户将焦点放在#search_bar 上。当#search_bar 有一个keyup 事件时，它会像您之前一样进行搜索，但是当#search_bar 失去焦点（用户单击其他地方或其中一个结果）时，#searchResults 将被隐藏。

于 2012-12-06T13:53:05.057 回答