jQuery autocomplete ajax with Text and Image

By | June 4, 2020

Autocomplete jQuery

jQuery UI Autocomplete feature provides an instant action of suggestion when user start typing the name. It provides a quick search to users and selects fast their option from the populated list from the dropdown list.
When the user starts typing the autocomplete plugin fetch the data from the database which are matched to your keywords and listed to your textbox which you type.You can integrate jQuery UI Autocomplete easily to your project.

Generally, the autocomplete feature fetch the data as text under your textbox from the database. But you can customize the autocomplete data using custom HTML. When you want to show the design layout premium of your web page, you need this feature. We will show you how to add custom HTML and show images and text in Jquery autocomplete feature using Jquery, PHP and MySQL.

In this example, we integrate the autocomplete feature with text and image shows under your textbox or autocomplete dropdown.

  • Autocomplete text box fetch user by name.
  • When a user starts typing in the text box, matched users are fetched from the database.
  • The user’s data coming with name and image on the auto-suggestion.

Also Read:

Codeigniter send email to multiple recipients using Smarty Template Engine and JQuery

Create a Database Table

To store auto-suggestion data needs a table on the database, here is the code snippet copy the code and make a database, paste the query on SQL tab, click on GO.

Autocomplete Text box Feature

Include below files which help on autocomplete feature.

Using autocomplete() to use the feature of JQuery UI Autocomplete.

  • source – On the source, we specify the path of the file which fetches the data from the database.
  • minLength – On minLength, the user must type a minimum number of words to start searching.
  • select – This is an event, on this event when data fetched on auto-suggestion user selects that user, the user name sets on the textbox and their id set to a hidden field.
  • _renderItem- This helps to customise the HTML and fetch the text with an image.

HTML Snippet

On HTML input field we attach the autocomplete feature,

When the user starts typing, the suggestions are retrieved from the database and show under the textbox.
After that when you select any of from the suggestion that set to on the textbox and their id set on the hidden field.

Autocomplete Feature Snippet and Database Configuartion (getUserdetails.php)

The database configuration for connect to specific database, here specify the host, database user, password and database name.

  • The getUserdetails.php file loaded the Autocomplete Jquery UI feature
  • The autocomplete() function makes GET request to source URL and set the parameter to query string.
  • Use $_GET[”] method to get the term which user inputs.
  • Write the query for fetch match data from database using PHP and MySQL.
  • Fetch the user name, image and filter array generated data.
  • Render the filtered data in JSON format.

Conclusion

If you want to integrate the feature of autocomplete with text and image data on your project or website, it is very helpful to integrate custom HTML data. And also you can extend the feature as you want.

Happy Coding..!

Subscribe For Latest Updates

Sign up to best of PHP Code Solutions, informed analysis and opinions on what matters to you.
Invalid email address
We promise not to spam you. You can unsubscribe at any time.

2 thoughts on “jQuery autocomplete ajax with Text and Image

  1. Pingback: Import and Export CSV file in PHP - phpcoder.tech

  2. Pingback: 4 Steps to Upload Image Using Ajax and JQuery - PHPCODER.TECH

Leave a Reply

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