0

関数が自動提案であるというコードがあります。このコードはうまく機能します。そして、テキストボックスにテキストを入力した後、ボックスを閉じる方法についてお聞きしたいと思います。私のコードでは、どこかをクリックしようとしても、ボックスが閉じませんでした。だから私がやりたいのは、どこかをクリックしてボックスを閉じる必要があるときです。

これが私のjQueryです：

$(document).ready(function() {
    $(".text_search").keyup(function() {
        var searchbox = $(this).val();
        var dataString = 'searchword=' + searchbox;
        if (searchbox == '') {} else {
            $.ajax({
                type: "POST",
                url: "search1.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#display").html(html).show();
                }
            });
        }
        return false;
    });
});​

HTML：

<div class="search">
<form method="get" action="search.php" autocomplete="off">
<input class="text_search" type="text" name="q" id="q" value="Search people" onfocus="if (this.value == 'Search people') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search people';}">
</form>
</div>

<div id="display">
</div>
4

4 に答える 4

4

ドキュメント本文にイベントハンドラーを追加し、開いている場合はボックスを閉じます。あなたの体の終わりにそれを置いてください：

<script>
    $(window).ready(function(){
        $('body').click(function(){
            $("#display").hide();
        });
    });
</script>

編集 ：

検索ボックスをクリックしたときにも検索を再開したい場合は、スクリプトを次のように変更します。

$(document).ready(function() {
    var launchSearch = function() {
        var searchbox = $(this).val();
        var dataString = 'searchword=' + searchbox;
        if (searchbox == '') {} else {
            $.ajax({
                type: "POST",
                url: "search1.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#display").html(html).show();
                }
            });
        }
        return false;
    };
    $(".text_search").keyup(launchSearch).click(launchSearch);
    $('body').click(function(){
        $("#display").hide();
    });
});​
于 2012-08-23T07:24:02.853 に答える
3

これを試して：

 $('body').click(function(){
        $("#display").hide();
    });
于 2012-08-23T07:24:53.970 に答える
1 
$(document).click(function(e) {
                  if($(e.target).parents("#display").length == 0 && 
                     $(e.target).attr("id") != "display") {
                         $("#display").hide();
                    }
               });

クリックが表示divにないかどうかを確認する必要があります

于 2012-08-23T07:27:39.493 に答える
0

これを試して

$(document).ready(function(){
$('body').click(function(){
            $("#display").hide();
        });

$(".text_search").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search1.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false;
});
});
于 2012-08-23T07:28:12.370 に答える