Suggestion field using jQuery is very useful for a web application. In this post, you will learn how to perform Google-like search textbox in PHP. Using jQuery UI we can efficiently show relevant suggestion from the database under a textbox.
Let’s start the suggestion textbox tutorial. Here we will display a textbox for posted article list. Once the user enters key in a textbox, the auto-suggestion post list would be listed below a textbox. Those auto-suggestion posts would be fetched from the MySql database.
Include required JS & CSS:
Initially, we want to include a required jQuery library, jQuery UI library, and jQuery UI stylesheet.
Add HTML Textbox with Autocomplete function:
Add the textbox with a unique id to assign suggestion list result and also add the suggestion list function with a particular textbox with autocomplete() function and relevant attribute.
PHP Source Script
Create table with following details
MySQL Database connection details
Here first we need to get the text box entered key value to filter from a database value. Using $_GET[‘term’] we can get the entered key value and stored into PHP variable. Then we will fetch the data from post list table and filter the post title by the search key value. Finally, we will return the filtered post title data in JSON format.
