html - 输入为空时如何隐藏部分css？

Question

当搜索返回为空时，我试图隐藏搜索结果。有办法吗？

一切正常。就是不喜欢看到上一封信的搜索结果。例如，如果您键入 A 并清空输入框。结果将保留在那里。

感谢知道答案的人。

<div id="result"></div>应该是被屏蔽的。

我的搜索 CSS 代码:

.content{
    width:275px;

}
#searchid
{
    width:275px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
#result
{
    position: absolute;
    width:275px;
    padding:10px;
    display:none;

    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{
    padding:10px;
    border-bottom:1px #999 dashed;
    font-size:15px;
    height:50px;
}
.show:hover
{
    background:lightgrey;
    color:#FFF;
    cursor:pointer;
}

我的搜索输入框的 HTML 代码:

<div class="content">
                        <input type="text" class="search" id="searchid" placeholder="Search"/>
                        <div id="result"></div>
                    </div>

我的搜索显示是这样的:

<div class="show" align="left">
                           <span class="name"><a href="/sheridan/page/?p=' .  $rowsTitle['id'] . '">' . $rowsTitle['title'] . '</a> ' . $label . "<br>".
                      </div>

我用来获取搜索信息的JQuery:

$(function(){
        $(".search").keyup(function()
        {
            var searchid = $(this).val();
            var dataString = 'search='+ searchid;
            if(searchid!='')
            {
                $.ajax({
                    type: "GET",
                    url: "/sheridan/script/search.php",
                    data: dataString,
                    cache: false,
                    success: function(html)
                    {
                        $("#result").html(html).show();
                    }

                });
            }return false;
        });

        jQuery("#result").live("click",function(e){
            var $clicked = $(e.target);
            var $name = $clicked.find('.name').html();
            var decoded = $("<div/>").html($name).text();
            $('#searchid').val(decoded);
        });
        jQuery(document).live("click", function(e) {
            var $clicked = $(e.target);
            if (! $clicked.hasClass("search")){
                jQuery("#result").fadeOut();
            }
        });
        $('#searchid').click(function(){
            jQuery("#result").fadeIn();
        });
    });

我忘记添加用于从数据库中获取信息的 JQuery 函数。

Answer 1

结果div我没有清空，因为你在有字母的时候往里面填数据。

$(".search").on("keyup", function(){
    if($(this).val()==""){
        $("#result").hide();
    }
    else {
        $("#result").show();
    }
});

Fiddle