javascript - 如果单击任意位置，如何关闭该框？

我有一个代码，该功能是自动提示。此代码效果很好。我只想问您在文本框中输入文本后如何关闭该框。在我的代码中，当我尝试单击任意位置时，都没有关闭该框。所以我想做的是当我单击任意位置时必须关闭该框。

这是我的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>

最佳答案

只需在文档正文上添加事件处理程序，然后关闭该框（如果打开）即可。把它放在你身体的尽头：

<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();
    });
});​