Topic:
Make a friend search box using php and jacascript.
Everyone knows in facebook we search friends by name or their contact numer or their email and gets instant result of their query. So In this article we are going to discuss briefly how it works and how to make such type system. This is very simple to make search in php, mysql with ajax and jquery. So lets see this.
First you need to create a database and make a table like this
Database:
Name – peoples
Table Name – all_people
Table columns – id, name, contact, profile_img.
Number of page needed 3 and 1 folder for storing images:
- database.php
- index.php
- result.php
Step 1:
Create database.php and connect your database in this file like this:-
<?php $con = mysqli_connect("localhost","root","","peoples"); if(!$con){ echo "Database not connected"; } ?>
Note:
You need to include this page in all of those pages discussed in top
Step 2:
Now make the design page index.php and implement this html codes :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <center> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="thumbnail"> <input type="text" id="searchid" placeholder="Search for new friends" class="form-control search"> </div> <div id="result"></div> </div> </div> <div class="col-md-4"></div> </div> </center> </div>
Step 3:
Now implement this script after html codes in index.php file:
<script type="text/javascript"> $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataString = 'search='+ searchid; if(searchid!='') { $.ajax({ type: "POST", url: "result.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jQuery("#result").on("click",function(e){ var $clicked = $(e.target); var $name = $clicked.find('.name').html(); var decoded = $("<div/>").html($name).text(); $('#searchid').val(decoded); }); jQuery(document).on("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){ jQuery("#result").fadeOut(); } }); $('#searchid').click(function(){ jQuery("#result").fadeIn(); }); }); </script>
Step 4:
You are almost done. 99% is completed. Now in this end step implement this php scripts in result.php:
<?php require_once 'database.php'; ?> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style type="text/css"> .friend_btn{ border: none; border-bottom-left-radius: 16px; height: 35px; border-top-right-radius: 17px; background-color: #0483E9; color: #fff; } </style> <table style="float: left; width: 100%;"> <?php $q=$_POST['search']; $sql_res=mysqli_query($con,"SELECT * from all_people where name like '%$q%' or contact like '%$q%' order by id LIMIT 5"); while($data=mysqli_fetch_array($sql_res)) { ?> <tr style="margin-top: 5px;"> <td><img style="width:50px; border-radius: 27px; height:50px; float:left; margin-right:6px;" src="profile/<?php echo $data['profile_img']; ?>"> <span class="name"><?php echo $data['name']; ?></span> <br/><?php echo $data['contact'];; echo "</br>" ?> </td> <td><button type="button" class="friend_btn">Add friend <i class="fa fa-user-plus" aria-hidden="true"></i></button></td> </tr> <?php } ?> </table>
How to Make New Friends in Your 30s, 40s, 50s and Beyond