搜索結果「漂浮」在頁面的其餘部分？

我爲我的網站做了一個即時搜索功能，你可以在這裏看到：harrisonbh.com/chatterr/instant_search/，但搜索結果只是推下了內容。搜索結果「漂浮」在頁面的其餘部分？

的index.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(); 
     } 

    }); 

});

的search.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;還是什麼來解決這個。你認爲我應該怎麼做？謝謝。

來源

2013-04-27 Harrison Howard

放的情況下，當返回的東西......我做了搜索，並沒有返回 – Hackerman 2013-04-27 23:54:02

搜索從我的datavase中返回用戶名 – 2013-04-28 00:02:24

給我們一個默認的用戶名，以在您的：harrisonbh.com/chatterr/instant_search/例子中看到「浮動」結果;） – Hackerman 2013-04-28 00:04:54

只需附上您輸入文本字段和搜索按鈕<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-28 18:32:51 Cthulhu

搜索結果「漂浮」在頁面的其餘部分？

回答

相關問題