Project Name – Simple Google Suggestion Box Using jQuery, Ajax, PHP & MySQL
Solution
- Database Name – ajaxtodo
- Table Name – details
- 4 Field – id(int, auto_increment, primary), name(varchar, 255), address(varchar, 255), phone(varchar, 255)
Index.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Google Suggestion - By Hindialerts.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 d-flex flex-column justify-content-center align-items-center" style="height:100vh"> <a href="https://hindialerts.com" target="_blank"><img class="img-fluid mb-3" src="https://hindialerts.com/wp-content/uploads/2018/09/75.png" alt=""></a> <div class="search-box"> <input class="form-control" type="text" name="search" id="search" placeholder="Enter Your Search Term" autocomplete="off"> <span class="suggestion" id="suggestion"></span> </div> </div> </div> </div> <!--add jquery--> <!--add bootstrap.js--> <!--add ajax.js file--> </body> </html>
style.css
.form-control{ width:30vw; border-radius: 25px; padding:.75rem 1.25rem; } .form-control:focus{ border-color: #ddd; border-radius: 25px; box-shadow:none!important; } .list-group-item:last-child{ border-top:none; border-radius: 0px 0px 25px 25px !important; } .list-group-item:first-child{ border-top:none; } .list-group-item:hover{ background: #eee; } .list-group-item:not(:last-child){ border-bottom:none; border-top:none; } ul{ margin-top: -5px; }
db.php
<?php $conn = new mysqli('localhost', 'root', '', 'ajaxtodo'); if ($conn->connect_error) { die("Connection Failed"); }
search.php
<?php //including db.php file for database connection include 'db.php'; $search = $_POST['search'] ?? ""; //query for selecting data from our database $query = "SELECT * FROM details WHERE name LIKE '%$search%'"; //execute query $result = $conn->query($query); $opt = "<ul class='list-unstyled list-group'>"; //checking result that should be more than 0 if ($result->num_rows > 0) { //looping our data till the last on our database while ($row = $result->fetch_assoc()) { $opt .= "<li class='list-group-item'>{$row['name']} - <span class='align-content-end'>{$row['address']}</li>"; } } else { $opt .= "<li class='list-group-item'>No Result Found</li>"; } $opt .= "</ul>"; echo $opt;
Now is the magic part – Ajax.js file
$(document).on('keyup', '#search', function () { let search = $(this).val(); if (search.length > 3) { $.ajax({ url: 'search.php', data: { search: search }, method: "POST", success: function (res, text) { $("#suggestion").html(res); $("#search").css({ borderRadius: "25px 25px 0px 0px", borderBottom: "0px", }) } }) } else { $("#suggestion").html(''); $("#search").css({ borderRadius: "25px", borderBottom: "1px solid #ddd", }) } });
This is only for learning purpose that you can understand easily. but you can make only one or two php file for making your project as small as possible. If you get any error or want to something new to learn share details below.
Other Important Topics
- [Free] Simple PHP OOP Job Posting Website Template
- Call Flipkart API with PHP Code Example
- [Project File] PayuMoney PHP Scripts
- [Project File] Send SMS Using PHP
- How To Make a Breadcrumb Navigation using PHP?
- [Project File] Simple Chat System in PHP
- Verification Account on Website by Email using PHP
Leave a Reply