当输入为空时如何隐藏部分css？
当输入为空时如何隐藏部分css？
提问于 2015-01-05 06:36:04
当搜索恢复为空时，我试图隐藏搜索结果。有办法吗？
一切都很好。我只是不喜欢看到上一封信的搜索结果。示例，如果键入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函数。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-01-05 07:08:27
我还没有清除结果div，因为您正在用数据填充它时，有一封信。
$(".search").on("keyup", function(){
if($(this).val()==""){
$("#result").hide();
}
else {
$("#result").show();
}
});小提琴
Stack Overflow用户
发布于 2015-01-05 06:48:39
您必须使用JavaScript来执行此操作，因为CSS不支持任何识别空输入字段的方法。
在这个例子中，我选择使用jQuery，但是可以很容易地使用外部库来实现它。
$('.search').on('input', function() {
$('#result').toggle( $(this).val() );
});JSFiddle
Stack Overflow用户
发布于 2015-01-05 06:46:13
使用JQuery
$( "#searchid" ).keypress(function() {
var search = $( "#searchid" ).val()
if(search==''){
$("#result").html();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27774520
复制相关文章
相似问题
腾讯云开发者
