我使用 jquery 创建了一个带有自动建议的搜索框。问题是我的列表像往常一样从上到下打开。我怎样才能让它以相反的方向打开,从下到上?
这是html代码:
<input name="search" type="text" id="search_form_1" size="65" placeholder=" Search..."/>
<input type="submit" value="" name="submit" />
这是我的 CSS:
#search_result{
padding:0px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background:#333;
color:white;
position:absolute;
cursor:pointer;
}
#search_form_1{
float: left;
padding-top:6px;
padding-left: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#333;
}
这是我的 Jquery 代码:
$(document).ready(function(){
var left = $('#search_form_1').position().left;
var top = $('#search_form_1').position().top;
var width = $('#search_form_1').width();
$('#search_result').css('left', left+4).css('top', top-50).css('width',width);
$('#search_form_1').keyup(function(){
var value = $(this).val();
if(value != ''){
$.post('search_form.php', {value: value}, function(data){
$('#search_result').html(data);
});
}
});
});
最后这是我的 php 代码,它调用并在列表中显示名称:
<?php
$value = $_POST['value'];
$query = mysql_query("SELECT `surname` FROM `users` WHERE `surname` LIKE '$value%' ");
while($run = mysql_fetch_array($query)){
$surname = $run['surname'];
echo "$surname";
}
?>