1

最初のスタートは虫眼鏡アイコンの検索ボックスがあります。クリックすると ( :focus)、入力できる検索ボックスに展開されます。

私の友人は、ユーザーが検索フィールドに入力を開始するとすぐに結果が (mySQL データベースから) その下に表示される jQuery コードを作成してくれました。これをクリックすると結果が表示されます。

ただし、検索フィールドをクリックして、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 にキーアップ イベントがある場合、以前と同じように検索が実行されますが、#search_bar がフォーカスを失った場合 (ユーザーが別の場所をクリックした場合、または結果の 1 つをクリックした場合)、#searchResults は非表示になります。

于 2012-12-06T13:53:05.057 に答える