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

您必须使用JavaScript来执行此操作，因为CSS不支持任何识别空输入字段的方法。

我选择在这个例子中使用jQuery，但是很容易就可以使用没有外部库来实现。

$('.search').on('input', function() {
    $('#result').toggle( $(this).val() );
});

<强> JSFiddle

Answer 2

我没有清除结果div，因为当你有一封信时，你正在填充数据。

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

Fiddle

Answer 3

使用JQuery

$( "#searchid" ).keypress(function() {
  var search = $( "#searchid" ).val()
if(search==''){
  $("#result").html();
}
});

Answer 4

请尝试以下代码：

$(document).ready(function(){
  $("#searchid").keypress(function(){
    var len = $("#searchid").val().length;
     if (len <= 0)
     {
         //make result blank
        $("#result").hide();
     }
  });
});

修改

使用$("#result").hide();

或

$("#result").css("display","none");

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

4 个答案: