Create Autocomplete Input Field Using jQuery Ajax

When you type something in google it will suggest you a bunch of matching queries instantly which is called autocomplete. These are repeatedly searched queries stored in google servers. Likewise you can create an input field that autocompletes your words or queries from the data stored in MySQL databse.

Create jQuery Autocomplete Input Field

What is the Purpose of Autocomplete

These are some of the uses of having autocomplete input fields.

  • If you have some sort of form in your page and a user have to submit multiple forms. They don’t have to type full words again and again as autocomplete will suggest the full word by matching the previous entry.
  • Lets say you have a search engine or your site’s inner search page where users type and find the results. You can store the queries being typed by the users and suggest the most searched queries or keywords when they try to type another time.
  • If you have a text editor kind of page where people can type many paragraphs and send email or publish as a blog etc. It will be useful if you can autocomplete their words as they have to type many long paragraphs.
  • If you have a social network kind of website you can have a user search box like facebook to extract user data below when people type their names.

If you want you can use the jQuery UI autocomplete widget or learn to create it from the scratch here.

Basic HTML

<!DOCTYPE html>
 <title>Create Autocomplete Input Field Using jQuery Ajax</title>
 <script type="text/javascript" src=""></script>
 <script type="text/javascript">
 $(document).ready(function () {
 //jquery code comes here 
<input type="text" id="name" autocomplete="off">
<div id="results"></div>

This is the basic HTMl snippet. We have text input field with the id name. Make sure to use autocomplete attribute to off default suggestions by the browser.

Then we have a div with the id result in which we are going to insert our suggestions later.

Include jQuery Library and initialize document ready function and we are set to go.


For this example I have a MySQL table called students. It has a column student_name, from where we are going to get the words for autocomplete.

Create jQuery Autocomplete Input Field


$(document).ready(function () {
		$("#name").keyup(function () {
			var val = $(this).val();
				method: "POST",
				url: "ajax.php",
				data: { key: val}
			}).done(function( data ) {
				if(data == ''){
					$("#results div").each(function () {
						$(this).click(function () {
							var text = $(this).text();


We get the value whenever you type in the input field using .keyup() function.

Then we send the value to a page called ajax.php via jQuery Ajax request. Once it is done we get the returned data and check if it is empty.

If it is empty, we have to empty #results div and hide it. Otherwise, we show the #results div and insert the returned data inside of the div using .html() function.

Lets see what ajax.php has.


//connection to mysql database
$con = mysqli_connect('hostname','username','password','dbname') or Die();
//get the search key from POST request
$key = $_POST['key'];
//if key is empty print empty
if($key == ''){
 echo "";
 $query = "SELECT student_name FROM students WHERE student_name LIKE '%".$key."%'";
 $result = mysqli_query($con, $query);
 while ( $row = mysqli_fetch_array($result)) {
 //print matching names 
 echo "<div>".$row['student_name']."</div>";

We get the search key from POST request and then using select query we have to match the key from student_name column, then we have to print the result which will be inserted to #results div by jQuery

If you start typing in the input field you will see the suggestion below. If you click on it the value will be filled automatically.

Using CSS style it whatever you like. And done. Try this code and give your feedback.

Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

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