Searching for address and pin code on a Database with Autocomplete.User will enter matching keys for searching a location. Using Autocomplete we can show the available names which the user can select. On selection of the location, full details like division, Region, Circle, Taluk, district, state with Pin Code will be displayed. For this a single table with all required data is maintained. Source of Autocomplete is name column storing the location. We kept one textbox to receive the user entered text.
Posting the Entered chars to backend script![]() To get the suggestions for autocomplete we used source option. We are posting the user entered chars to backend PHP script search-keyword-backend.php. We getback the return value in lable and value pairs, this will be displayed to user as suggested list for its selection.
User selection one of the option from the suggested list.From the suggested list once the user select one option the select event of autocomplete gets triggered.
![]() We also used another image as button to reset the input box. We used load() to post the unique id of the record to backend script and get back the all the details of the record to display to user. Here is the complete front end code to to post the data to backend script and get the output to display.
Searching location within a State![]() We were posting the user entered keyword to backend script and getting the matching records as suggestions for user to select. Now we will send one more parameter, the state name along with the user entered chars to restrict the return suggestion limited to a particular state only. One dropdown list showing the state names is added for the user to select the name of the state to restrict the suggestions to that state only. Here the complete script.
Backend PHP scriptThere are two pages with PHP code to manage the database. The first one indexck.php manages the suggestions for autocomplete so users can select one of the options. The second one indexck-dtl.php receives the id of the record based on the user selection of option and then returns the full details of that record for display.indexck.phpThis page receives the user entered chars and the name of the state selected by dropdown listbox. ( in case of index-state.php page ). These two parameters are then used to create the sql query by using WHERE condition check using LIKE query to match user entered chars.By entering DA [space] BA we can get records matching to both DA or BA. While displaying the options we have combined officename and statename by using CONCAT function. Using the query through fetch_array() function, we filled an array of options by value and label pairs. The same array we use to crate json output to post back to our main scripts.
indexck-dtl.phpThis file receives the ID of the record ( location ) as selected by user from the suggestion of autocomplete. Using this ID all details of the record is collected and posted back to main page.Select Query to get details of the record
Files inside autocomplete-search.zip ( script ) config.php MySQLi database connection details are kept here index.php Main file to search database on location column. index-state.php Main file to search database on location and state column. indexck.php PHP script to receive keywrods and state name to return matching options for the suggestion for the user to select. indexck-dtl.php PHP Script to get the ID of the user selected record and return the full details of the matching ID sql_dump.txt SQL dump to create the pincode table with few sample data index.php Main file to search database on location column. templates/head.php templates/bottom.php Connects to CDN to use JQuery, Jquery UI, Bootstrap and other CSS files .
This article is written by plus2net.com team.
![]() |
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |