How to auto populate with AJAX

lessonsphpprogrammingtutorial

Written by:

Reading Time: 2 minutes

Hello all you lovely people. I trust your day has been awesome so far.Today I want to go through a common task lots of coders do when working with input fields. Usually, you might not want the user to be put through the stress of remembering the full value, and its corresponding details. The solution to do is to have the values auto populate as they are being typed.

This is where AJAX steps in. AJAX is a departing technology with the arrival of Single Web pages for example Angular, React JS etc. Single Web Pages make auto completing your input values so much easier. Interestingly enough, on most sites the world over AJAX is still very much used, and heavily so.

This post is for the many developers the world over who still need to use AJAX. This is especially common when you have to maintain a web site built with server side languages. In that case, AJAX would give that better bit of sleek user experiences your customers or users would love very much.

Follow this simple eight step approach to understanding how to auto fill fields based on inputs entered with AJAX. All the code, and the queries used to create the database and table are found at this repository.

What you would learn ?

  • Autocomplete input values as you type them.
  • Return values from the database without refreshing your web page

Prerequisites
A little knowledge in

  • PHP
  • MySQL
  • JavaScript
  • HTML

Steps
Part 1: Common beginnings
1. Create your database and table. The SQL file needed to create the demo tables is in the Github repo.
2. Since we are working with PHP, you would need to deploy these files to a PHP server.
3. Create an HTML file, where the input field would show.

Part 2: All about inputs and outputs

Here is where our knowledge of PHP and MySQL becomes useful.

4. Everything depends on an input and output. Using a GET variable the inputs return the possible instances of name.
In ajax_name_autocomplete.php :

$term = trim($_GET[‘term’]);

 

In ajax_autocomplete.php :

$term = trim($_REQUEST[‘first_name’]);

 

5. Next comes the SQL query, which is passed to the mysqli_query function
In ajax_name_autocomplete.php :

$sql = ‘SELECT first_name, first_name FROM people WHERE first_name is not null ‘;for($i = 0; $i < $p; $i++) {  $sql .= ‘ AND first_name LIKE ?’;}

 

In ajax_autocomplete.php :

$sql = ‘select first_name,last_name,dob,gender  from people where first_name like “%’.$term.’%”  limit 1′;

 

6. Finally the output is returned. You can control how the output is returned. As you can see one is returned in JSON and another as a string.
In ajax_name_autocomplete.php :

$json = json_encode($a_json);print $json;

 

In ajax_autocomplete.php :

print $row[0].’~’.$row[1].’~’.$row[2].’~’.$row[3];

 

Part 3: The middle man

This is the last piece of the puzzle to make our AJAX complete. We now need to create that missing link with JavaScript.

7. Create a JavaScript file, which acts as soon as an action happens on the input field.

8. Reference the JavaScript path, and the complementary JavaScript files needed in the HTML file.

And that is all there is to it!

Download ( and star ) the example scripts from the GitHub page. You are now well on your way to creating web pages that have a synchronous feel to it.

Well done chap and more grease to your elbows. Until the next time, keep practicing and cheers.

Leave a Reply

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

Scroll Up