Question

我使用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";
  }
?>

Answer 1

尝试使用jQuery位置实用程序，如

$(function() {
function position() {
  $( ".positionable" ).position({
    of: $( "#parent" ),
    my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
    at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
    collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
  });
}

这里我是子元素，而at是父元素

jquery使搜索自动建议列表从下到上打开（相反方向）

1 个答案: