MySQL & PHP References: City - Autocomplete JQuery Bootstrap4

Sunday, March 31, 2019

City - Autocomplete JQuery Bootstrap4

City.php

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   
 <style>
 .typeahead { border: 2px solid #FFF;border-radius: 4px;padding: 8px 12px;max-width: 300px;min-width: 290px;background: rgba(66, 52, 52, 0.5);color: #FFF;}
 .tt-menu { width:300px; }
 ul.typeahead{margin:0px;padding:10px 0px;}
 ul.typeahead.dropdown-menu li a {padding: 10px !important; border-bottom:#CCC 1px solid;color:#FFF;}
 ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; }
 .bgcolor {max-width: 550px;min-width: 290px;max-height:340px;background:url("world-contries.jpg") no-repeat center center;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px;}
 .demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;}
 .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  text-decoration: none;
  background-color: #1f3f41;
  outline: 0;
 }
 </style> 
</head>
<body>
 <div class="bgcolor">
  <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
  <label class="demo-label">Search City:</label><br/> <input type="text" name="txtCountry" id="txtCountry" class="typeahead"/>
  <input type="submit" name="csubmit" value=" Submit">
 </form>
 <?php if(isset($_POST["csubmit"])){
  print_r($_POST);
 } ?>
 </div>
</body>
<script>
    $(document).ready(function () {
        $('#txtCountry').typeahead({
            source: function (query, result) {
                $.ajax({
                    url: "server.php",
     data: 'query=' + query,            
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
      result($.map(data, function (item) {
       return item;
                        }));
                    }
                });
            }
        });
    });
</script>
</html>

Search.php

<?php  
 $keyword = strval($_POST['query']);
 $search_param = "{$keyword}%";
 $conn =new mysqli('localhost', 'root', '' , 'weddingplanner');

 $sql = $conn->prepare("SELECT * FROM cities WHERE city LIKE ?");
 $sql->bind_param("s",$search_param);   
 $sql->execute();
 $result = $sql->get_result();
 if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
  $countryResult[] = $row["city"] . ' - ' . $row["state"];
  }
  echo json_encode($countryResult);
 }
 $conn->close();
?>

MySQL & PHP References

Search This Blog

Sunday, March 31, 2019

City - Autocomplete JQuery Bootstrap4

No comments:

Post a Comment

content-wide advt