Creating an autocomplete field | Setting up frontend | Part 2

In the first part of this article, we had set up the backend MySQL database. Now we can write the code necessary to get information from the server and convert it to a format we can parse, JSON in my case here. So lets begin.

Step 4 – Writing script to get data from MySQL database

As always, we can write it in any language we are comfortable with. PHP happens to be mine. The script is straight forward, accept the pincode via a GET request, ‘pincode’ parameter. Query the database for its existence, add it to an array and using json_encode() function in PHP, display the output. If value does not exist, it will return null, and it is not our concern here about what happens after that, as it will be taken care by the application using this API.

Code: retrieve.php

<?php
 $pincode = $_GET['pincode'];
 $conn = mysql_connect("localhost", "root", "password");
 mysql_select_db("turnouts") or die();
 
 $pincode = (string)mysql_real_escape_string($pincode);
 
 $sql = "SELECT taluka, district, state FROM pincode WHERE pincode = '$pincode'";
 $data = mysql_query($sql);
 if(!$data) {
  die(mysql_error());
 }
 $row = mysql_fetch_row($data);
 $taluka = $row[0];
 $district = $row[1];
 $state = $row[2];
 $state = str_replace("\r\n", "", $state);
 $taluka = strtolower($taluka);
 $district = strtolower($district);
 $state = strtolower($state);
 header('Content-type: application/json');
 $array = array('taluka'=>$taluka, 'district'=>$district, 'state'=>$state);
 echo json_encode($array);
?>

The URL will follow the pattern, /retrieve.php?pincode=000000 and return data. As an example, the following image,

If you have come successfully to this step, then bingo! We now have a working API.

Step 5 – Writing an AJAX form using jQuery

We will now write a simple form with 4 fields in HTML. Include jQuery in that page, and then write the script at the bottom which will query our API asynchronously.

Code: pincodes.html

<html>
<head>
 <title>Pincodes</title>
 <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="form">
 <label for="pincode">Pincode:</label>
 <input type="text" name="pincode" id="pincode" required /><br />

 <label for="taluka">Taluka:</label>
 <input type="text" name="taluka" id="taluka" /><br />
 <label for="district">District: </label>
 <input type="text" name="district" id="district"><br />
 <label for="state">State:</label>
 <input type="text" name="state" id="state"><br />
</div>
<script>
$(document).ready(function() {
 $('#pincode').keyup(function(e) {
  var pincode = $(this).val();
  
  if(pincode.length == 6 && $.isNumeric(pincode)) {
   var req = 'retrive.php?pincode=' + pincode;
   $.getJSON(req, null, function(data) {

                 
    $('#taluka').val(data.taluka);
    $('#district').val(data.district);
    $('#state').val(data.state);
   });
  };
 });
</script>
</body>
</html>

Some explanation goes here.
The .keyup() event fires when a key is pressed in that field. We could have use onFocus() or onBlur() in javascript but that only fires when a field is focused or blurred, so this is much better. Since we have pincodes of length 6 digits here in India, to prevent script from querying for the first five digits, we have added a if(pincode.length == 6) to our code.

As I said, the even fires as soon as one enters the 6th digit and populates the remaining three fields with the data it retrieves.

It is hard to show it in a still image, but having just entered the pin, rest of the fields get populated.

Finally

So this was it. I hope you enjoyed it. Any corrections or suggesting, mail them to me or just comment down below. Thank you for reading.

Abhishek Nagekar

hobbyist {x}

Creating an autocomplete field | Setting up frontend | Part 2

Step 4 – Writing script to get data from MySQL database

Step 5 – Writing an AJAX form using jQuery

Finally