在web開發過程當中，我們經常需要在前台頁面輸入關鍵字進行數據的搜索，我們通常使用的搜索方式是將搜索結果用另一個頁面顯示，這樣的方式對於搭建高性能網站來說不是最合適的，今天給大家分享一下如何使用jQuery，MySQL 和Ajax 創建簡單和有吸引力的Ajax 搜索，這是繼《使用jQuery打造一個實用的數據傳輸模態彈出窗體 》第二篇jquery專案實際運用的教程，希望大家在開發專案的時候能夠根據自己的實際情況靈活運用
點選搜尋預設顯示所有的結果
輸入A之後顯示的搜尋結果
輸入 p之後顯示的搜尋結果
找不到相關的搜尋字詞頁
示範 -點擊下面的搜尋按鈕搜尋資料
檔案結構 主要使用幾個檔案 index.php首頁 dbcon.php資料庫連結檔案 search.php搜尋處理頁面
第一步創建一個ajax_search的數據庫，緊接著創建一個ajax_search表
HTML ：index.php--程序主頁
HTML ：index.php--程序主頁
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ajax 教學:使用jquery和mysql建立一個ajax搜尋 title> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <br><link rel="stylesheet" type="text/css" media="screen" href="css.css"> <br> <br><script language="javascript"> <BR> $(document).ready(function(){ <BR>//顯示載入條<BR>function showLoader(){ <BR>$('.search-background').fadeIn(200); <BR>} <BR>//隱藏載入條<BR>function hideLoader(){ <BR>$('#sub_cont').fadeIn(1500); <BR>$('.search-background').fadeOut(200); <BR>}; <BR>$('#search').keyup(function(e) { <BR>if(e.keyCode == 13) { <BR>showLoader(); <BR>$('#sub_cont ').fadeIn(1500); <BR>$("#content #sub_cont").load("search.php?val=" $("#search").val(), hideLoader()); <BR>} <BR>}); <BR>$(".searchBtn").click(function(){ <BR>//顯示進度<BR>showLoader(); <br><br>$('#sub_cont ').fadeIn(1500); <BR>$("#content #sub_cont").load("search.php?val=" $("#search").val(), hideLoader()); <BR>}); <BR>}); <BR></script> <br>
Ajax 教學:使用jquery和mysql建立一個ajax搜尋
