输入为空时如何隐藏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

使用JQuery

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

Answer 2

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

我选择使用 jQuery 作为此示例，但无需外部库即可轻松实现。

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

JSFiddle

Answer 3

试试下面的代码：

$(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");

Answer 4

我还没有清除结果div因为你有字母就往里面填数据

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

Fiddle

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

How to hide part of css when input is empty?

html

css