Untitled

This is my index.php code
 -------------------------
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Index</title>

 <!-- Bootstrap -->
 <link href="css/bootstrap-3.2.min.css" rel="stylesheet">
 <link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">


 <style>

 </style>


 </head>
 <body>

 <div class="container">
 <div class="row" >
 <form id="" class="search-form" action="result.php" method="POST">
 <div class="col-md-12">

 <input type="text" id="txt-city" name="txt-city" placeholder="Enter City">
 <input type="hidden" id="txt-city-id" name="txt-city-id">

 <div class="row search-input" > <!-- Nested Row -->
 <div class="col-md-7 search-bar">
 <input type="text" id="txt-keywords"  placeholder="Enter Product or Service"></div>

 <div class="col-md-3 search-bar">
   <input type="text" id="txt-area" placeholder="Enter Location"></div>
   <input type="hidden" id="txt-area-id" name="txt-area-id">

   <div class="col-md-2 search-submit">
       <button id="btn-search" class="search-button">Search</button></div>
   </div>
 </div>
</form>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

</script>

<script src="js/bootstrap-3.2.min.js"></script>

<script src="js/jquery-ui-1.10.4.custom.min.js"></script>


<script type="text/javascript">


$(document).ready(function() {

var city = [
            { "id": 2001, "value": "Ahmedabad" },
            { "id": 1269, "value": "Bangalore"},
            { "id": 2002, "value": "Bhopal"},
            { "id": 2003, "value": "Chennai" },
            { "id": 2004, "value": "Coimbatore"},
            { "id": 2005, "value": "Delhi"},
            { "id": 348, "value": "Hyderabad" },
            { "id": 2007, "value": "Indore"},
            { "id": 2008, "value": "Jaipur"},
            { "id": 2009, "value": "Kolkata" },
            { "id": 2010, "value": "Luknow"},
            { "id": 2011, "value": "Ludiana"},
            { "id": 2012, "value": "Mumbai" },
            { "id": 2013, "value": "Nagpur"},
            { "id": 2014, "value": "Nashik"},
            { "id": 2015, "value": "Pune" },
            { "id": 2016, "value": "Rajkot"},
            { "id": 2017, "value": "Surat"}
    ];

 ***if( $("#txt-city").click() ) {

        url = city;
    }else{
        url = getCity.php
    }***

    $("#txt-city").autocomplete({

        source: url,
        select: function(event, ui) {

                $( "#txt-city-id" ).val(ui.item.id);
                //alert(is_city_selected);
        },
        change: function( event, ui ) {

                $("#txt-city-id").val(ui.item.id);

                // clear the txt-area textbox
                $("#txt-area").val('');

                // send the city id to fetch areas in it
                secondary_url = "getArea2.php?filter=" + ui.item.id;

                $("#txt-area").autocomplete("option", "source", secondary_url);

        },
        minLength: 1
    });

        //alert(global_city);

    $("#txt-area").autocomplete({

        source: "",
        change: function( event, ui ) {

                    $("#txt-area-id").val(ui.item.id);
        },
        minLength: 1
    });

  }); // end of the jQuery() function

  </script>

  </html>

  </body>

  -------------------------
  This is getCity.php code
  -------------------------
  This code fetches the cities from cities table.

<?php

/* Connection vars here for example only. Consider a more secure method. */
$dbhost = 'localhost';
$dbuser = 'abc';
$dbpass = 'abc123';
$dbname = 'mydb1';

try {
   $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
}
catch(PDOException $e) {
   echo $e->getMessage();
}

$return_arr = array();

if ($conn){
    //$ac_filter = $_GET['filter'];
    $ac_term = $_GET['term']."%";
    $query = "SELECT city_id, city_name FROM tbl_cities WHERE city_name like :term

    LIMIT 20";

  $result = $conn->prepare($query);
//$result->bindValue(":filter",$ac_filter);
$result->bindValue(":term",$ac_term);
$result->execute();

/* Retrieve and store in array the results of the query.*/
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $row_array['value'] = $row['city_name'];
    $row_array['id'] = $row['city_id'];

    array_push($return_arr,$row_array);
}


}

/* Free connection resources. */
$conn = null;

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

?>

--------------------------------
This is getArea.php
-------------------------------
This code fetches the areas from areas table based on the city_id passed to it.

<?php

/* Connection vars here for example only. Consider a more secure method. */
$dbhost = 'localhost';
$dbuser = 'abc';
$dbpass = 'abc123';
$dbname = 'mydb1';

try {
    $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
}
catch(PDOException $e) {
    echo $e->getMessage();
}

$return_arr = array();

if ($conn){

    $ac_filter = $_GET['filter'];
    $ac_term = $_GET['term']."%";

    $query = "SELECT area_id, area_name FROM tbl_areas WHERE city_id = :filter AND
    area_name like :term  LIMIT 15";

    $result = $conn->prepare($query);
    $result->bindValue(":filter",$ac_filter);
    $result->bindValue(":term",$ac_term);
    $result->execute();

    /* Retrieve and store in array the results of the query.*/
    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
       $row_array['value'] = $row['area_name'];
       $row_array['id'] = $row['area_id'];

       array_push($return_arr,$row_array);
    }

   }

   /* Free connection resources. */
   $conn = null;

   /* Toss back results as json encoded array. */
   echo json_encode($return_arr);

  ?>
  --------------------------------------