Autocomplete Textbox Using PHP, MySQL and jQuery

Autocomplete search shows the users list of matching results while types into textbox. In this article we will explain to you how to implement autocomplete textbox using PHP, MySQL and PHP.

jQuery AJAX Autocomplete – Country Example, Autocomplete Textbox using jQuery, PHP and Mysql, AJAX autocomplete with jQuery, PHP, and JSON, Php mysql ajax search autocomplete, PHP – Ajax AutoComplete Search, autocomplete-php, Creating autocomplete for city search using PHP and MySQL, PHP Ajax Autocomplete Search from Database Example, autocomplete search php, bootstrap autocomplete ajax

Here, we’ll take one example of autocomplete search for city names that will be fetched from a database and suggested to users while typing into a textbox.

Example

Output - Autocomplete Textbox Using PHP, MySQL and jQuery - Clue Mediator
Output – Autocomplete Textbox Using PHP, MySQL and jQuery – Clue Mediator

Steps to implement autocomplete search

  1. Create table in database
  2. Create a database connection
  3. Create an autocomplete search form
  4. Create PHP code for search from database
  5. Output

File Structure

  • autocomplete-textbox-ajax-php
    • ajax-city-search.php
    • connection.php
    • index.php

1. Create table in database

First, we will create a table named city in the database. Run the following script to create a table with dummy records in the database.

2. Create a database connection

Now, we have to create a database connection file named connection.php to fetch the city name from the database.

connection.php

3. Create an autocomplete search form

Here, we include the Jquery, Jquery UI and CSS file for autocomplete search and initialize the autocomplete() method.

index.php

4. Create PHP code for search from database

The autocomplete() method is called the ajax-city-search.php file that fetches the data from database as user typing in textbox and returns in json encoded format. So here we write the PHP code as per GET request.

ajax-city-search.php

5. Output

Run the example and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code

GitHub Repository
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

11 Responses

  1. Ruthwik says:

    Thanks very much
    The code was very helpful
    Hope i will visit this site again

  2. Fayez says:

    Thank you very much
    This is what I was looking for ..

  3. Asqar Arslonov says:

    Thanks a lot of,but I don’t.Please create video about your autocomplete

  4. Murat Akkurt says:

    Thank you

  5. Vivek Khillar says:

    sir but where are the database code how many tables and rows are there

    • Clue Mediator says:

      Hi Vivek,
      Thanks for drawing our attention. We will update that information in the article. However, you can create a table called city and add the id and city_name as fields.

  6. Chunnu says:

    Hi… What should be modified in the code above for input text field autocomplete on a form?

    • Clue Mediator says:

      Hi Chunnu,
      In the given code, we have implemented autocomplete based on the input text field id (#search_city). We have also added the GitHub Repository for the demo.

      Feel free to share your query with us.

Leave a Reply

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