我正在尝试修改实时搜索模块，但遇到了一些样式问题。
当我键入关键字时，它会向下显示结果。如果它是左或右，我知道该怎么做，但我不知道如何向上定位。
我需要设置它的样式，以便在输入时向上显示结果。
HTML
<div id="footer">
<input type="text" name="filter_name2" >
<div class="button-search"></div>
</div>
CSS
#livesearch, #livesearch * {
margin: 0;
padding: 0;
list-style: none;
}
#livesearch {
position: absolute;
width: 200px;
top: 0px;
background: #ffffff;
z-index: 100;
box-shadow: 0px 10px 30px rgba(0,0,0,.5);
}
#livesearch li {
border-top: 1px solid #eeeeee;
}
#livesearch a {
display: block;
clear: both;
overflow: hidden;
line-height: 20px;
padding: 10px;
text-decoration: none;
}
#livesearch a:hover, #livesearch li.active a {
background: #38B0E3;
color: #ffffff;
}
#livesearch img {
float: left;
width: 50px;
height: 50px;
margin-right: 10px;
}
#livesearch img[src=''] {
display: none;
}
.more {
text-align: center;
}
#livesearch a em {
display: block;
color: #888888;
font-style: normal;
font-weight: bold;
}
#livesearch a:hover em, #livesearch li.active a em {
color: white;
}
#livesearch strike {
color: #aaaaaa;
}
#livesearch a:hover strike {
color: lightblue;
}
#livesearch small {
display: block;
}
Javascript
$(function(){
var i = (!!$("#livesearch").length ? $("#livesearch") : $("<ul id='livesearch'></ul>") ), s = $("#footer [name=filter_name2]");
function repositionLivesearch() { i.css({ top: (s.offset().top+s.outerHeight()), left:s.offset().left, width: s.outerWidth() }); }
$(window).resize(function(){ repositionLivesearch(); });
s.keyup(function(e){
switch (e.keyCode) {
case 13:
$(".active", i).length && (window.location = $(".active a", i).attr("href"));
return false;
break;
case 40:
($(".active", i).length ? $(".active", i).removeClass("active").next().addClass("active") : $("li:first", i).addClass("active"))
return false;
break;
case 38:
($(".active", i).length ? $(".active", i).removeClass("active").prev().addClass("active") : $("li:last", i).addClass("active"))
return false;
break;
default:
var query = s.val();
//alert(query);
if (query.length > 2) {
$.getJSON(
"<?php echo HTTP_SERVER; ?>?route=product/search/livesearch&filter_name=" + query,
function(data) {
i.empty();
$.each(data, function( k, v ) { i.append("<li><a href='"+v.href+"'><img src='"+v.img+"' alt='"+v.name+"'><span>"+v.name+(v.model ? "<small>"+v.model+"</small>" : '')+"</span><em>"+(v.price ? v.price : '')+"</em></a></li>") });
i.remove(); $("body").prepend(i); repositionLivesearch();
}
);
} else {
i.empty();
}
}
}).blur(function(){ setTimeout(function(){ i.hide() },500); }).focus(function(){ repositionLivesearch(); i.show(); });
});
最佳答案
我只是加了
bottom: 100%;
到列表中，它运行完美:)
关于javascript - 重新定位并向上显示实时结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25679800/