Create an ajax keyword data search implementation by jquery _ jquery-js tutorial

We often need to enter keywords on the front-end page to search for data. This has become a habit. Today we will share with you how to use jQuery, MySQL, and Ajax to create simple and attractive Ajax searches, do not miss out if you are interested. 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 I will share with you howUse jQuery, MySQL, and AjaxCreate a simple and attractive Ajax search. This is the second tutorial on practical use of the jQuery project following "create a practical data transmission mode pop-up form with jquery, we hope that you can flexibly use the project based on your actual situation.

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 Data

The 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.

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 -- main page of the program

The Code is as follows:

Ajax Tutorial: Create an ajax search using jquery and mysql