In the web development process, we often need to enter keywords on the front-end page for data search. We usually use the search method to display the search results on another page, this method is not the most suitable method for building a high-performance website. Today we will share with you how to use jQuery, MySQL, and Ajax to create simple and attractive Ajax searches, this is the second tutorial on how to use jQuery to create a practical data transmission mode pop-up form. I hope you can use it flexibly according to your actual situation during development.
Click search to display all results by default.
Enter the search result displayed after
Search result displayed after p is input
No search term Page found
Demo-click the search button below to search for DataThe file structure mainly uses several file index. php homepage dbcon. php database connection file search. php search processing page
The first step is to create an ajax_search database, and then create an ajax_search table.
HTML: index. php -- main page of the programCopy codeThe Code is as follows: <! 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 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"/>
</Head>
<Script language = "javascript">
$ (Document). ready (function (){
// Display the load entry
Function showLoader (){
$ ('. Search-background'). fadeIn (200 );
}
// Hide the load entry
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 (){
// Display progress
ShowLoader ();
$ ('# Sub_cont'). fadeIn (1500 );
$ ("# Content # sub_cont"). load ("search. php? Val = "+ $ (" # search "). val (), hideLoader ());
});
});
</Script>
<Body>
<H1> Ajax Tutorial: Create an ajax search using jquery and mysql <Div class = "textBox">
<Input type = "text" value = "" maxlength = "100" 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>
</Html>
DB Connect: dbcon. php -- database connection fileCopy codeThe Code is as follows: <? Php
// Database connection Function
$ Link = mysql_connect ('localhost', 'root', 'Your password ');
Mysql_select_db ('ajax _ demo', $ link); // select a database connection
?>
The search. php code on the search result page is as follows:Copy codeThe Code is as follows: <? Php
Function checkValues ($ value)
{
// Use this function to check all these values to prevent SQL injection and Cross-Site Scripting
// Remove spaces or other characters at the beginning and end of the string
$ Value = trim ($ value );
// Stripslashes
If (get_magic_quotes_gpc ()){
// Delete the backslash added by the addslashes () function. This function is used to clear the data retrieved from the database or HTML form.
$ Value = stripslashes ($ value );
}
// Convert all <,> characters
$ Value = strtr ($ value, array_flip (get_html_translation_table (HTML_ENTITIES )));
// Remove HTML tags
$ Value = strip_tags ($ value );
// Reference value
$ Value = mysql_real_escape_string ($ value );
Return $ value;
}
Include ("dbcon. php"); // load the database connection file
$ Rec = checkValues ($ _ REQUEST ['val ']);
// Obtain table content
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); // query this statement
$ Total = mysql_num_rows ($ rsd); // number of rows in the returned result set
?>
<! -- Loop output result -->
<? 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> occupation </th>
</Tr> ";
While ($ row = mysql_fetch_assoc ($ rsd ))
{
Echo "<tr class = 'every _ 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> ';}?>
The checkValues function filters strings to prevent SQL injection and cross-site scripting attacks. mysql_query ($ SQL) is used to query statements. mysql_fetch_assoc () is used to loop the output results. How can this problem be solved, you can use this code directly if your project needs it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
