在web開發過程當中，我們經常需要在前臺頁面輸入關鍵詞進行數據的搜索，我們通常使用的搜索方式是將搜索結果用另一個頁面顯示，這樣的方式對于搭建高性能網站來說不是最合適的，今天給大家分享一下如何使用 jQuery，MySQL 和 Ajax創建簡單和有吸引力的Ajax 搜索，希望大家在開發項目的時候能夠根據自己的實際情況靈活運用。
點擊搜索默認顯示所有的結果
輸入A之后顯示的搜索結果
輸入 p之后顯示的搜索結果
沒有找到相關的搜索詞頁面
演示 -點擊下面的搜索按鈕搜索數據
文件結構 主要用到幾個文件 index.php首頁 dbcon.php數據庫連接文件 search.php搜索處理頁面
第一步創建一個ajax_search的數據庫，緊接著創建一個ajax_search表
CREATE TABLE `ajax_search` (
`id` int(11) NOT NULL auto_increment,
`FirstName` varchar(50) NOT NULL,
`LastName` varchar(50) NOT NULL,
`Age` int(11) NOT NULL,
`Hometown` varchar(50) NOT NULL,
`Job` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
HTML ：index.php--程序主頁面
DB Connect:dbcon.php--數據庫連接文件
<?php
//數據庫連接函數
$link = mysql_connect('localhost', 'root', '你的密碼');
mysql_select_db('ajax_demo',$link);//選擇數據庫連接
?>搜索結果頁面search.php代碼如下
<?php
function checkValues($value)
{
// 使用此函數對所有這些值都要檢查防止 sql 注入和跨站點腳本
//除去字符串開頭和末尾的空格或其他字符
$value = trim($value);
// Stripslashes
if (get_magic_quotes_gpc()) {
//刪除由 addslashes() 函數添加的反斜杠，該函數用于清理從數據庫或 HTML 表單中取回的數據。
$value = stripslashes($value);
}
//轉換所有的 <, >字符
$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));
// 剝去 HTML的標簽
$value = strip_tags($value);
// 引用值
$value = mysql_real_escape_string($value);
return $value;
}
include("dbcon.php");//加載數據庫連接文件
$rec = checkValues($_REQUEST['val']);
//獲取table內容
if($rec)
{
$sql = "select * from ajax_search where FirstName like '%$rec%' or LastName like '%$rec%' or Age like '%$rec%' or Hometown like '%$rec%'";
}
else
{
$sql = "select * from ajax_search";
}
$rsd = mysql_query($sql);//查詢這條語句
$total = mysql_num_rows($rsd);//返回結果集中行的數目
?>
<!--循環輸出結果-->
<?php
echo "<h2>搜索結果</h2>";
echo "<table border='0' id='content' cellspacing='0' cellpadding='0'>
<tr bgcolor='#FFFFCC'>
<th>姓名</th>
<th>昵稱</th>
<th>年齡</th>
<th>住址</th>
<th>職業</th>
</tr>";
while ($row = mysql_fetch_assoc($rsd))
{
echo "<tr class='each_rec'>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}?>checkValues函數過濾字符串防止sql注入和跨站點腳本攻擊，mysql_query($sql);用來查詢語句，mysql_fetch_assoc（）用來循環輸出結果，怎么樣是不是很簡單，如果你的項目有需要，可以直接使用這個代碼。
