In this post, we are going to learn Ajax Live Data Search with a help of PHP, MySQLi and Ajax. In real-time most of the website and web applications providing content search option to make the application as most user-friendly. You may see this live search option at the top of the page in most of the social networking sites like Facebook, Twitter, LinkedIn and more. It helps us to find out our search-related content quickly from their database or storage and it will help the user to get the relevant content as by what they are given key search.

In this post, we are going to get the relevant content from a database and display into HTML page with the help of search key entered in a text box. Here we user MySQL LIKE and REGEXP Methods to filter and get the data from a database and return a JSON response to the requested page. It will support find from a database then we can get an instant result from a site without refresh a page.

MySQL Like option help us to find the data value with entire search key is present in given MySQL table column data but it will only get the data if entire searched content is present in specified columns. But MySQL REGEXP option helps us to get the data with the random key value from given searched key. REGEXP will split the given searched key value into many keys with help of black space and it will replace with ‘|’ pipe symbol.

This method is prepared by Ajax with Jquery and we can use Ajax HTTP Post function. With the assistant of this method it finds data on the database and sends back a result to front-end web page without page refresh. This functionality will give an amazing look to your site.

Step 1: Database and Connect Details

Here we going to get contention with MySQL database using PHP with MySQLi contention property. Using this contention object we can process the Live data serach using search key values entered by user.

and connection object,
Step 2: Make HTML page

Here we are going to make a user view page with the search option and search key text box to make a live search option into it and also display default showing data while page loading.

Step 3: Defile Ajax Script

In this part, we need to define a jQuery function to perform data live data search with Ajax Post call with parameters. It will trigger when a user enters the key value into the text box with Keyup Event call and Radia button Change event hit a call to function to the server to get the relevant data with JSON format and display procedures.

Step 4: PHP script to filter data

Here we define a what procedures need to happen while user hit request to the server-side page. It contains both LIKE and REGEXP options and will perform based on user value search type and return as JSON data to the requested page.

Download   Demo

Leave a Reply

Your email address will not be published. Required fields are marked *