2

ユーザーを選択し、明らかにスクリプトで開くページの div に送信する検索ボックスがあります。しかし、ユーザーが自分のサイト ページの div の外側をクリックすると、ボックスを閉じたいと思います。いくつかのアイデアを試してみましたが、探しているものが見つかりませんでした。

HTML

<input type="text" id="search_txt" placeholder="Search for friends" class="blog_input_field" onKeyUp="dosearch(document.getElementById('search_txt').value,'ajaxsearch_results');"><hr>
<div class="searchresults" id="ajaxsearch_results">

リクエスト機能

function dosearch(text,containerid){
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();

    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            //alert(xmlhttp.responseText);
            document.getElementById(containerid).innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","include/search.people.php?t="+text,true);
    xmlhttp.send();

}
4

2 に答える 2

8

jqueryでは、次のようなことができます：

$(document).click(function(){
   $('.searchresults').hide();   
});

$('.searchresults').click(function(e){
    e.stopPropagation();
});

</p>

于 2012-08-24T22:20:47.200 に答える
4

これは生の JS で実行でき、Jquery は必要ありません。onmousedown または on click をフックし、JS イベントが最終的に (ブロックされない限り) ドキュメントにバブルアップするという事実を利用します。そう：

document.onmousedown (or onclick) = function (e) {

  if (!e) e = window.event; // for browser compatibility

  target = (e.target ) ? e.target : e.srcElement; // again for browser compat..

  // note - could be child of div, too: see fine print    
  if (e.target.id != "divIDgoesHere")
      document.getElementById('divIDgoesHere').style.display = "none" ;
      // or other hide
}

細字：

  • div 内をクリックすると、ターゲットは div の内部の子である可能性があります。その場合、検索 div に到達するまで parentNode を反復処理し、それらの要求を無視できます。

  • div を完全に削除することもできます (div.parentNode.removeChild(div))。

  • コードを微調整する必要があります。主要なものは何もありません。

お役に立てれば

TG

于 2012-08-24T22:18:48.220 に答える