php 搜尋方塊提示(自動完成)執行個體代碼_PHP教程

百度的搜尋大家都在用，當使用者輸入文字時，搜尋方塊下面自動提示相關的資訊，加強了使用者體驗，的確不錯，那麼這個效果是如何?的呢

先看一下吧，這樣更有動力，要不然大家還不知道我在講什麼，到底要達到什麼樣的效果！

　　下面先主要講解原理：

　　在search.html頁面中，使用者在搜尋方塊內輸入“j”時，使用javascript擷取搜尋方塊的常值內容，到資料庫中尋找相關的內容並返回，再使用javascript將伺服器返回的結果顯示在搜尋方塊下面的提示框內，供使用者參考選擇。

　　具體的實現方法：

　　首先在頁面中做好搜尋方塊、搜尋按鈕、顯示搜尋提示的層，如下代碼






　　使用瀏覽器瀏覽頁面，會看到的效果

　　看起來很普通，沒什麼樣式，現在稍作樣式上的調整

#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*將搜尋方塊寬度設定大點WEB開發筆記（www.chhua.com）*/

　　再將顯示搜尋提示的層樣式調整一下，由於搜尋提示層在搜尋方塊正下方，所以我們設定其定位方式為絕對位置

　　#search_auto{border:1px solid #817FB2; position:absolute;} /*設定邊框、定位方式*/

　　接著用JS將搜尋提示層的位置放置在搜尋方塊正下方，且寬度和搜尋方塊相同，這裡我們採用jQuery來解決

　　$(‘#search_auto').css({‘width':$(‘#search input[name="k"]‘).width()+4});

　　搜尋提示層的位置和寬度已經確定好了，由於在使用者沒有輸入搜尋文字前這個提示框是不顯示的，所以我們先要將它設定成隱藏，在提示層的樣式裡加上display:none將其隱藏。

　　已經全部OK了，現在只要給搜尋方塊的onkeyup註冊事件即可，我們依然採用jQuery來處理，在jQuery中是keyup

$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){　 //向伺服器上的search_auto.php發送post資料，$.post是jQuery的方法
if(data=='0') $('#search_auto').html('').css('display','none');　 //判斷伺服器上返回的資料，如果等於０，則表示沒有找到相關的內容，所以將提示框的內容清空並隱藏WEB開發筆記（www.chhua.com）*/
else $('#search_auto').html(data).css('display','block');　 //如果伺服器上返回的資料不等於０，則將返回的內容放到提示框內並顯示提示框
});
});

　　上面用戶端已經做好了，已經可以將使用者輸入的內容發送到伺服器端，並響應伺服器的傳回值。

　　那麼伺服器端如何處理用戶端發送來的資料呢，下面用PHP來舉個例子

$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");　 //根據用戶端發送來的資料，到資料庫中查詢10條相關的結果
if(mysql_num_rows($re)<=0) exit('0');　 //判斷查詢結果，如果沒有相關的結果，那麼直接返回0
echo '

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
';　 //將查詢得到的相關結果的標題輸出，這個地方需要注意，由於通過jQuery的ajax技術返回的文本是UTF-8編碼，所以如果$ro[title] 中包含中文，一定要記得用PHP的iconv或其它函數將其轉換成UTF-8編碼，否則在頁面中看到的會是一串亂碼
echo '
• 關閉';　 //輸入一個關閉按鈕，讓使用者不想看到提示層時可以點擊關閉，關閉按鈕採用jQuery，解釋一下，當前點擊的按鈕是$(this)，一直向上找到其第三個父元素，讓它逐漸消失WEB開發筆記（www.chhua.com）*/
  echo '

';
?>

　　現在伺服器已經可以正確的執行我們發送過去的資料了，並且返回相應的結果，那麼現在在搜尋方塊內輸入一個文字測試一下吧，但前提是你的資料庫中得有與這個文字相關的內容啊，要不然你也看不到提示框的出現，因為沒有相關提示內容啊，呵呵。

　　可是還有點美中不足，那就是提示框裡面的內容不美觀，和我們在百度搜尋中看到的提示框相比，簡直是太醜了，哈哈，不急，我們再用css來調整顯示的效果

#search_auto li{background:#FFF; text-align:left;} /*設定提示框內的li標籤效果*/
#search_auto li.cls{text-align:right;} /*設定提示框內的關閉按鈕效果*/
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;} /*設定提示框內li標籤下的a標籤效果*/
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*當滑鼠移入提示框內時的效果*/

　　現在才算是真正的完全製作完成，至於要不要設定一個延遲處理，或是其它更完善的功能，留給朋友們自己開動腦筋了，大家也可以在下面回複你的想法，等等。

　　用戶端完整代碼：




jquery+php實現使用者輸入搜尋內容時自動提示


　　伺服器端完整代碼：

$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");
if(mysql_num_rows($re)<=0) exit('0');
echo '

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
';
echo '
• 關閉';
  echo '

';
?>

http://www.bkjia.com/PHPjc/325008.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/325008.htmlTechArticle百度的搜尋大家都在用，當使用者輸入文字時，搜尋方塊下面自動提示相關的資訊，加強了使用者體驗，的確不錯，那麼這個效果是如何?的呢...

