in the Web development process, we often need to input keywords in the foreground page for data search, we usually use the search method is the search results on another page, such a way to build high-performance Web site is not the most appropriate, today to share with you how to use Jquery,mysql and Ajax create a simple and attractive Ajax search, which is a tutorial on the actual use of the second jquery project using jquery to create a useful data transfer modal pop-up form, and I hope you can use it flexibly in the development of your project.
Click Search to show all results by default
Enter the search results shown after a
The search results displayed after you enter P
No related search terms page found
Demo-click the Search button below to search for data
File structure is mainly used to several files index.php home dbcon.php database connection file search.php search processing page
The first step is to create a ajax_search database, followed by the creation of a ajax_search table
Copy Code code as follows:
CREATE TABLE ' Ajax_search ' (
' id ' int (one) not NULL auto_increment,
' FirstName ' varchar not NULL,
' LastName ' varchar not NULL,
' Age ' int (one) not NULL,
' Hometown ' varchar not NULL,
' Job ' varchar not NULL,
PRIMARY KEY (' id ')
) Engine=innodb DEFAULT Charset=utf8 auto_increment=5;
html:index.php--Program Main Page
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax Tutorial: Create an Ajax search using jquery and MySQL </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"/>
<script language= "JavaScript" >
$ (document). Ready (function () {
Show loading bars
function Showloader () {
$ ('. Search-background '). FadeIn (200);
}
Hide the add-in bar
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 () {
Show progress
Showloader ();
$ (' #sub_cont '). FadeIn (1500);
$ ("#content #sub_cont"). Load ("search.php?val=" + $ ("#search"). Val (), Hideloader ());
});
});
</script>
<body>
<div class= "TextBox" >
<input type= "text" value= "maxlength=" name= "SearchBox" id= "Search" >
<div class= "SEARCHBTN" >
</div>
</div>
<BR clear= "All"/>
<div id= "Content" >
<div class= "Search-background" >
<label></label>
</div>
<div id= "Sub_cont" >
</div>
</div>
</body>
DB connect:dbcon.php--Database Connection file
Copy Code code as follows:
<?php
Database connection functions
$link = mysql_connect (' localhost ', ' root ', ' your password ');
mysql_select_db (' Ajax_demo ', $link);//Select Database connection
?>
Search results page search.php code as follows
Copy Code code as follows:
<?php
function Checkvalues ($value)
{
Use this function to check all of these values to prevent SQL injection and Cross-site scripting
Remove spaces or other characters at the beginning and end of a string
$value = Trim ($value);
Stripslashes
if (GET_MAGIC_QUOTES_GPC ()) {
Deletes the backslash that is added by the addslashes () function, which is used to clean up data retrieved from a database or HTML form.
$value = Stripslashes ($value);
}
Convert all > characters
$value = Strtr ($value, Array_flip (get_html_translation_table (html_entities)));
Strip out the HTML tags
$value = Strip_tags ($value);
Reference value
$value = mysql_real_escape_string ($value);
return $value;
}
Include ("dbcon.php");//Load Database connection file
$rec = Checkvalues ($_request[' Val ']);
Get table Contents
if ($REC)
{
$sql = "SELECT * from Ajax_search where FirstName like '% $rec% ' or LastName like '% $rec% ' or ' $rec% ' or ' is hometown Like '% $REC% ' ";
}
Else
{
$sql = "SELECT * from Ajax_search";
}
$RSD = mysql_query ($sql);//Query this statement
$total = mysql_num_rows ($RSD);//return number of rows in the result set
?>
<!--cyclic output results-->
<?php
echo "echo "<table border= ' 0 ' id= ' content ' cellspacing= ' 0 ' cellpadding= ' 0 ' >
<tr bgcolor= ' #FFFFCC ' >
<th> name </th>
<th> Nickname </th>
<th> Age </th>
<th> Address </th>
<th> Careers </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 ';}? >
checkvalues function filter string prevents SQL injection and Cross-site scripting attacks. mysql_query ($sql); Used to query statements,MYSQL_FETCH_ASSOC () to loop out the results, how easy is it if your project is needed, you can use this code directly
