jquery creates an ajax keyword data search implementation idea_jquery

In the process of web development, we often need to enter keywords on the front page to search for data. The search method we usually use is to display the search results on another page. This method is very useful for building high-performance websites. It’s not the most appropriate. Today I’d like to share with you how to use jQuery, MySQL and Ajax to create a simple and attractive Ajax search. This is the follow-up to Using jQuery to create a practical data transmission Modal pop-up form 》The second tutorial on the actual application of jquery projects. I hope everyone can use it flexibly according to their actual situation when developing projects

Click search to display all results by default

Search results displayed after entering A

Search results displayed after entering p

No relevant search term page found

Demo - Click the search button below to search for data

File structure mainly uses several files 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

Copy code The code is as follows:

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--Program main page

Copy code The code is as follows:

> ;

Ajax Tutorial: Create an ajax search using jquery and mysql

DB Connect:dbcon.php--Database connection file

Copy code The code is as follows:

//Database connection function
$link = mysql_connect('localhost', 'root', 'your password');
mysql_select_db('ajax_demo',$link); //Select database connection
?>

The search results page search.php code is as follows

Copy codeThe code is as follows:

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()) {
//Remove the backslashes added by the addslashes() function, which is used to clean 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)));

// Strip HTML tags
$value = strip_tags($value);

// Quote value
$value = mysql_real_escape_string($value);
return $value;
}
include("dbcon.php");//Load the database connection file
$rec = checkValues($_REQUEST['val']);
//Get the 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);//Return the number of rows in the result set
?>