Creating Ajax-Based Data Search Features Using PHP, jQuery and MySql
It is common in a website or web application to have a data search feature based on certain keywords. For example, searching for book data based on the title of the book can also search based on the author of the book. This search feature makes it very easy for users to search data. So there is no reason not to implement it on the website or web application that we are developing.
In this article, I will show you how to create an article data search feature based on the title. Unlike search features in general, here we will implement Ajax to communicate with PHP to get data from the database which then the data will be displayed on the search page without any reloading process.
Similar Articles
Create Login Form with PHP, Jquery & CSS3 + Download
Setting Up Database
Create a table with article names as follows
CREATE TABLE article
(id
int(11) NOT NULL AUTO_INCREMENT,title
varchar(75) NOT NULL,link
varchar(100) NOT NULL,
PRIMARY KEY(id
)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1
Fill in the sample data as shown in the following image
sample data
Creating HTML+CSS pages
For the html we make it simple, which consists of 3 components. A text input, a button and a list to display search results.
Here is the code
Next we add CSS to beautify the HTML that we created earlier.