1

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";
  }
?>
4

1 に答える 1

0

次のような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()
  });
}

ここで my は子要素で at は親要素です

于 2013-06-27T20:55:53.993 に答える