快捷導(dǎo)航

jquery創(chuàng)建一個ajax關(guān)鍵詞數(shù)據(jù)搜索實(shí)現(xiàn)思路

更新時間：2013年02月26日 10:54:29 作者：

我們經(jīng)常需要在前臺頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索這已經(jīng)成為了一種習(xí)慣今天給大家分享一下如何使用 jQuery，MySQL和Ajax創(chuàng)建簡單和有吸引力的Ajax搜索,感興趣的你可不要錯過了哈

在web開發(fā)過程當(dāng)中，我們經(jīng)常需要在前臺頁面輸入關(guān)鍵詞進(jìn)行數(shù)據(jù)的搜索，我們通常使用的搜索方式是將搜索結(jié)果用另一個頁面顯示，這樣的方式對于搭建高性能網(wǎng)站來說不是最合適的，今天給大家分享一下如何使用 jQuery，MySQL 和 Ajax創(chuàng)建簡單和有吸引力的 Ajax 搜索，這是繼《使用jQuery打造一個實(shí)用的數(shù)據(jù)傳輸模態(tài)彈出窗體》第二篇jquery項(xiàng)目實(shí)際運(yùn)用的教程，希望大家在開發(fā)項(xiàng)目的時候能夠根據(jù)自己的實(shí)際情況靈活運(yùn)用

點(diǎn)擊搜索默認(rèn)顯示所有的結(jié)果

輸入A之后顯示的搜索結(jié)果

輸入 p之后顯示的搜索結(jié)果

沒有找到相關(guān)的搜索詞頁面

演示 -點(diǎn)擊下面的搜索按鈕搜索數(shù)據(jù)

文件結(jié)構(gòu) 主要用到幾個文件 index.php首頁 dbcon.php數(shù)據(jù)庫連接文件 search.php搜索處理頁面

Files

第一步創(chuàng)建一個ajax_search的數(shù)據(jù)庫，緊接著創(chuàng)建一個ajax_search表

復(fù)制代碼代碼如下:

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--程序主頁面

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ajax 教程:使用jquery和mysql創(chuàng)建一個ajax搜索</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="css.css" /> 
</head> 
<script language="javascript"> 
$(document).ready(function(){ 
//顯示加載條 
function showLoader(){ 
$('.search-background').fadeIn(200); 
} 
//隱藏加載條 
function hideLoader(){ 
$('#sub_cont').fadeIn(1500); 
$('.search-background').fadeOut(200); 
}; 
$('#search').keyup(function(e) { 
if(e.keyCode == 13) { 
showLoader(); 
$('#sub_cont').fadeIn(1500); 
$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader()); 
} 
}); 
$(".searchBtn").click(function(){ 
//顯示進(jìn)度 
showLoader(); 

$('#sub_cont').fadeIn(1500); 
$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader()); 
}); 
}); 
</script> 
<body> 
<h1>Ajax 教程:使用jquery和mysql創(chuàng)建一個ajax搜索</h1> 
<div class="textBox"> 
<input type="text" value="" maxlength="100" name="searchBox" id="search"> 
<div class="searchBtn"> 
&nbsp; 
</div> 
</div> 
<br clear="all" /> 
<div id="content"> 
<div class="search-background"> 
<label><img src="loader.gif" alt="" /></label> 
</div> 
<div id="sub_cont"> 
</div> 
</div> 
</body> 
</html>

DB Connect:dbcon.php--數(shù)據(jù)庫連接文件

復(fù)制代碼代碼如下:

<?php 
//數(shù)據(jù)庫連接函數(shù) 
$link = mysql_connect('localhost', 'root', '你的密碼'); 
mysql_select_db('ajax_demo',$link);//選擇數(shù)據(jù)庫連接 
?>

搜索結(jié)果頁面search.php代碼如下

復(fù)制代碼代碼如下:

<?php 
function checkValues($value) 
{ 
// 使用此函數(shù)對所有這些值都要檢查防止 sql 注入和跨站點(diǎn)腳本 
//除去字符串開頭和末尾的空格或其他字符 
$value = trim($value); 
// Stripslashes 
if (get_magic_quotes_gpc()) { 
//刪除由 addslashes() 函數(shù)添加的反斜杠，該函數(shù)用于清理從數(shù)據(jù)庫或 HTML 表單中取回的數(shù)據(jù)。 
$value = stripslashes($value); 
} 
//轉(zhuǎn)換所有的 &lt;, &gt;字符 
$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); 

// 剝?nèi)?HTML的標(biāo)簽 
$value = strip_tags($value); 

// 引用值 
$value = mysql_real_escape_string($value); 
return $value; 
} 
include("dbcon.php");//加載數(shù)據(jù)庫連接文件 
$rec = checkValues($_REQUEST['val']); 
//獲取table內(nèi)容 
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);//返回結(jié)果集中行的數(shù)目 
?> 
<!--循環(huán)輸出結(jié)果--> 
<?php 
echo "<h2>搜索結(jié)果</h2>"; 
echo "<table border='0' id='content' cellspacing='0' cellpadding='0'> 
<tr bgcolor='#FFFFCC'> 
<th>姓名</th> 
<th>昵稱</th> 
<th>年齡</th> 
<th>住址</th> 
<th>職業(yè)</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>';}?>