我使用javascript和php列出了我数据库中的用户。它们之间存在差距。如何消除差距。你可以在图片中看到我想要的东西
的JavaScript
$(function(){
$(".form-control").keyup(function() {
var searchid = $(this).val();
var dataString = 'form-control='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "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("form-control")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
CSS
#searchid
{
}
#result
{
position:absolute;
width: 100%;
padding:0px;
display:none;
margin-top:-1px;
z-index: 1000;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show2
{
background-color: red;
font-size:30px;
border:10px #CCC solid;
}
.show2:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
HTML
<input type="text" class="form-control" id="searchid" placeholder="Arama" >
<div id="result">
</div>
答案 0 :(得分:0)
我猜您使用的<p/>
用于每个.show
元素。所以有一个默认的保证金风格。
试试这个(为类show
的每个元素设置 margin:0; ):
#searchid
{
}
#result
{
position:absolute;
width: 100%;
padding:0px;
display:none;
margin-top:-1px;
z-index: 1000;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show2
{
background-color: red;
font-size:30px;
border:10px #CCC solid;
margin:0;
}
.show2:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
&#13;
<input type="text" class="form-control" id="searchid" placeholder="Arama" >
<div id="result" style="display:block"><!-- i overide style to display block for try, remove attribute display -->
<p class='show2'>i used P</p>
<div class='show2'>i used div</div>
<div class='show2'>i used div</div>
</div>
&#13;