Autocomplete using database table as source in JQuery UIWe have one auto complete filed with id =t1, here source of the auto complete field is name column of our student table available inside MySQL database. We will use this data ( name of student table ) as source for filling the autocomplete.
Search for Pin code and other details of an Indian location by using autocomplete with database as source
Script OutputPart One : User can enter chars in the auto complete field, based on the input the matching record will be returned by backed PHP script as options of the auto complete
Part Two : Once user selects the name from the available options ( menu ) of the autocomplete list , the full details of the selected record will be displayed.
How the script worksWe kept the auto complete box inside index.php file.
Once user enters characters in side this box it tries to collect the options from autocomplete-source.php file by using JQuery.
The file backend-source.php first receives the user entered text .
Here we have used type:POST to send data by post method. A request object with a single term property carries the data to backend script. If we are not specifying type then by default GET type is used. In such a case a GET request will be made like this
Here term equals to the data the user enters inside the box.
Return data and showing valuesOn return of data from backend script or database we will map it to two different set of values.
On select Displaying label or value from the menu listBy default the return data menu will show label and on select the value will be displayed in the autocomplete text box. If you want while selecting the label to go as data then this changes are required.
Multiple word searchUser may enter single search word or more than one word. We have to return records matching to all the words entered by user. So before developing the qury based on the input keywords we will first break it and create an array of words. For example if user enters Alex Ro as search term then our query should be
We are using PHP string functions to break the string and creat Query with multiple OR combination.
After the query generation we will use it to collect records from database ( student ) table. Read more about collecting records in our PDO section.
Note that we have kept our database login details inside config.php file and same file is included at the starting of the page.
In above code $result is an array, from this we will generate our JSON string using json_encode.
Using MySQLi database connection
load method by JQuery
Part Two : Displaying details of selected option
Here our PHP script inside autocomplete-record.php will receive the ID value and return the matching record.
The data as returned by autocomplete-record.php file is displayed inside div layer id=d1
Pages in the scriptYou can download the script at the end of the page and here are the list of pages used.
Login details for MySQL database .
Main file having JQuery & HTML code .
PHP Script to collect query and return matching records in JSON format
PHP script to receive ID and return all columns of the matching record.
How to Install and test
This article is written by plus2net.com team.