Ajax, Json and autocomplete form input example with Jquery

We have a demo page for this so no worries about it – Today we implement several features to deal with a form input :

1. Autocomplete of the input
2. Ajax call to an external url using JQuery
3. Parsing JSON data from the external url

We will follow the tutorial on appending form inputs with Jquery so you already know about the design structure of the example, this time you don’t need to submit the data as this is out of scope.

Click on the following link to access the demo :

The JSON data of the external url :

As a way to get a usable format, we decided to go with JSON (Javascript Object Notation) which is widely used – we will talk about it when dealing with RESTful applications.

For this example we build a JSON file using Php :

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$my_array = [
["id" => "206", "description" => "Peugeot 206"],
["id" => "207", "description" => "Peugeot 207"],
["id" => "208", "description" => "Peugeot 208"],
["id" => "209", "description" => "Peugeot 209"],
["id" => "307", "description" => "Peugeot 307"],
["id" => "308", "description" => "Peugeot 308"],
["id" => "309", "description" => "Peugeot 309"],
["id" => "M3", "description" => "BMW M3"],
["id" => "Quatro", "description" => "Audi Quatro"]
];

echo json_encode($my_array);

Here we store objects having an id and a description, we will just use the description when retrieving the data from our main page.

Loading the Json data within a javascript array

The prerequisite for this function is to load the Jquery library in the head tags of your html5 page :

<script type="text/javascript" language="javascript" src="jquery-3.2.1.min.js"></script>

Then within the body of your page you can add the following script :

<script>

// Array to store the car models :

var availableModels = [];

// retrieve JSon from external url and load the data inside an array :
$.getJSON( "return-ajax.php", function( data ) {
var items = [];
$.each( data, function( key, val ) {
availableModels.push(val.description);
});
});

Note the use of the $.getJSON() function provided by JQuery. It will load the data from our external url (ie: return-ajax.php) and store the description data inside an array (ie : availableModels) which can then be used by other functions.

Attach the autocomplete event to a generated input field

It would be too simple to just add the autocomplete event to an html field already present on the page – let’s rather use our last example using a row we add by clicking on a button.

First off add the required Jquery UI script to get the autocomplete function available :

<script type="text/javascript" language="javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.css" type="text/css" rel="stylesheet" />

Then within your add click event add the following :

$( "#add" ).click(function() {

var newElement = '<tr><td><input type="text" value="" name="id[]" placeholder="4.."/></td>';

newElement += '<td><input type="text" value="" name="model[]" placeholder="input a model" class="model"/></td>';

newElement += '<td><input type="number" value="" name="amount[]" placeholder="0"/></td><td><input type="text" value="" name="currency[]" placeholder="EUR"/></td><td><input type="number" value="" name="ratio[]" placeholder="1"/></td></tr>';

$( "#mytable" ).append( $(newElement) );

$( ".model" ).autocomplete({
source: availableModels
});

});

We’ve just added a class : model inside the model[] input field and attached the autocomplete feature to that class so every time a user is adding a row with a model input field, the feature will be available :

Now you are ready to test it out on your own project. Later we will implement these features right inside a short Zend 3 application.

Stay tuned, we appreciate your feedback.