1

正如您在此处看到的那样，我为我的网站设置了即时搜索功能：harrisonbh.com/chatterr/instant_search/ 但搜索结果只是将内容下推。

索引.php

<html>
<head>
    <title>Search Box</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="index.js"></script>
</head>
<body>
<?php  
    //include 'connect.php';
    include '../core/database/connect.php';
?>

<span id="box">
    <input type="text" id="search_box"><button id="search_button">Search</button>
</span>

<div id="search_result">
</div>

Rest of content

</body>
</html>

index.js

$(document).ready(function(){
    var left = $('#box').position().left;
    var top = $('#box').position().top;
    var width = $('#box').width();

    $('#search_result').css('left', left).css('top', top+32).css('width', width);

    $('#search_box').keyup(function(){
        var value = $(this).val();

        if(value != ''){

            $('#search_result').show();
            $.post('search.php', {value: value}, function(data){
                $('#search_result').html(data);
            });
        } else {
            $('#search_result').hide();
        }

    });

});

搜索.php

<?php

    //include 'connect.php';
    include '../core/database/connect.php';
    $value = $_POST['value'];

    $search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
    while ($run = mysql_fetch_array($search_query)){
        $username =  $run['username'];

        echo '<a href=#>'.$username.'</a><br/>';

    }

?>

body{
    font-family: arial;
    font-size: 12px;
    color: #333;
    background:#fff;
}

input{
    padding: 5px;
    border: 0px;
    font-family: arial;
    font-size: 12px;
    color: #333;
    background:#fff;
    box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}

button{
    padding: 5px;
    border: 0px;
    font-family: arial;
    font-size: 12px;
    color: #fff;
    background:#4aaee7;
    /*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/ 
}

button:hover{
    background:#fff;
    color: #333;
    box-shadow: 0 0 5px rgba(210, 210, 210, 210);
    cursor: pointer;
}

#search_result{

}

/*#search_result {
    font-size: 12px;
    padding: 5px;
    box-shadow: 0 0 5px rgba(210, 210, 210, 210);
    background: #fff;
    color: #333;
    position: absolute;
    display: none;
}*/

a {
    background:#4aaee7;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: -14px;
    display: block;
}

a:hover{
    background: #fff;
    color: #4aaee7;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

li {
    padding: 5px;
}

我不确定我是否应该使用position: absolute;或解决此问题。你觉得我应该怎么做？谢谢。

4

1 回答 1

0

只需将您输入的文本字段和搜索按钮附在<div style="float:left;">

我的意思是，像这样：

<div style="float:left;">
    <span id="box">
        <input type="text" id="search_box"><button id="search_button">Search</button>
    </span>

    <div id="search_result">
    </div>
</div>
于 2013-04-28T18:32:51.393 回答