City jQuery AJAX Autocomplete


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Demo -country state city dropdown using jquery ajax</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  7.     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  8.     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
  9. </head>
  10. <style>
  11. .cen{
  12.     width:50%;
  13.     margin: 0 auto;
  14. }
  15. @media (max-width: 400px) { 
  16.     .cen{
  17.         width: 80%;
  18.         margin: 0 auto;
  19.     }
  20. }
  21. </style>
  22. <body>
  23.     <div class="row">
  24.         <div class="cen">
  25.         <h3></h3>Demo : Country state city dropdown using jquery ajax</h3>
  26. if(isset($_POST['city']) && isset($_POST['date']) && isset($_POST['time'])){
  27. echo '<h3>Output</h3><hr><dl class="dl-horizontal">';
  28. echo "<dt>Country</dt>  <dd>". $_POST['country'] ."</dd>";
  29. echo "<dt>State</dt>    <dd>". $_POST['state'] ."</dd>";
  30. echo "<dt>City</dt>     <dd>". $_POST['city'] ."</dd>";    
  31. echo "<dt>Date</dt>     <dd>". $_POST['date'] ."</dd>";
  32. echo "<dt>Time</dt>     <dd>". $_POST['time'] ."</dd><dl><hr>";
  33. }    
  34.             <form action="city-search.php"  method="post">
  35.             <div class="row">
  36.                     <div class="form-group col-sm-6">
  37.                         <label for="a">Date</label>
  38.                         <input type="date" name="date" id="date"  class="form-control"/>
  39.                     </div>
  40.                     <div class="form-group col-sm-6">
  41.                         <label for="a">Time</label>
  42.                         <input type="time" name="time" id="time"  class="form-control"/>
  43.                     </div>
  44.             </div>        
  45.                 <div class="form-group">
  46.                     <label for="a">Search City:</label>
  47.                     <input type="text" name="city" id="city" autocomplete="off" class="form-control typeahead"/>
  48.                 </div>
  49.                 <div class="row">
  50.                     <div class="form-group col-sm-4">
  51.                         <label for="a">Country</label>
  52.                         <input type="text" name="country" id="country" readonly class="form-control"/>
  53.                     </div>
  54.                     <div class="form-group col-sm-4">
  55.                         <label for="a">State</label>
  56.                         <input type="text" name="state" id="state" readonly class="form-control"/>
  57.                     </div>
  58.                     
  59.                     <div class="form-group col-sm-4">
  60.                         <label for="a">Country Code</label>
  61.                         <input type="text" name="country_code" id="country_code" readonly class="form-control"/>
  62.                     </div>
  63.                 </div>
  64.                 <div class="form-group ">
  65.                         <input type="submit" name="submit" id="submit" value="Submit" class="form-control"/>
  66.                 </div>
  67.             </form>
  68.         </div>
  69.         
  70.     </div>
  71. </body>
  72. <script>
  73.     $(document).ready(function () {
  74.         $('#city').typeahead({
  75.             source: function (query, result) {
  76.             states = [];
  77.             map = {};
  78.                 $.ajax({
  79.                     url: "http://astrologyclass.org/api/server.html?q=" + query,
  80.                     minLength: 2,           
  81.                     dataType: "json",
  82.                     type: "GET",
  83.                     success: function (data) {
  84.                         $.each(data, function (i, state) {
  85.                         map[state.city_name] = state;
  86.                         states.push(state.city_name);
  87.                         });
  88.                         result(states);
  89.                     }
  90.                 });
  91.             },
  92.             afterSelect: function(item) {
  93.             
  94.             $("#country").val(map[item].country_name);
  95.             $("#state").val(map[item].state_name);
  96.             $("#country_code").val(map[item].country_code);
  97.             }            
  98.         });
  99.     });
  100.     
  101. </script>
  102. </html>

Demo