Creating Autocomplete & Search Suggestion Functionality with PHP and MySQL

Rating: 5.0. From 2 votes.
Please wait...

Hello Mates,

We all know that most of the websites have user-friendly search features. Various search features can be implemented to make a site more user compatible, where users can interact with the whole site easily.Today we will learn to create Autocomplete & Search Suggestion Functionality.in this tutorial we will create a function which will predict a user query or try to compose the right question from our site so that we can easily understand the requirement of the user. The best solution for building the user-friendly search features are with autocomplete or search suggested keywords from the database to get the better response from the server.

For adding such functionality to our site a few year ago, you need expertise in several technologies like Ajax, jQuery, CSS, PHP, MYSQL etc.

But today, we can use the library of the twitter’s Typehead.js library, a jQuery plugin designed for add autocomplete functionality into your search boxes.

For the knowledge of our fellow mates typehead.js doesn’t hold any sample with an MYSQL database.
Let’s learn how to create autocomplete & advance search suggestions with PHP and MYSQL.

Firstly, let’s create an index.php file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
PHP MySQL Typeahead Autocomplete

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>

<style>
        h1 {<br />
            font-size: 20px;
            color: #111;
        }
  .content {
            width: 80%;
            margin: 0 auto;
            margin-top: 50px;
        }
  .tt-hint,
        .city {
            border: 2px solid #CCCCCC;
            border-radius: 8px 8px 8px 8px;
            font-size: 24px;
            height: 45px;
            line-height: 30px;
            outline: medium none;
            padding: 8px 12px;
            width: 400px;
        }
        .tt-dropdown-menu {
            width: 400px;
            margin-top: 5px;
            padding: 8px 12px;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 8px 8px 8px 8px;
            font-size: 18px;
            color: #111;
            background-color: #F1F1F1;
        }
    </style>

<script>
        $(document).ready(function() {
          $('input.city').typeahead({
                name: 'city',
                remote: 'city.php?query=%QUERY'
           });

        })
    </script>

&nbsp;
<div class="content"><form>
<h1>Put your keyword here for search</h1>
<input class="city" name="city" size="30" type="text" placeholder="Please Enter City or ZIP code" />

</form></div>
&nbsp;

Now, we will create a city.php file which will fetch all the result from MYSQL database and return the response in the JSON format. Here is the city.php code:

1
2
3
4
5
6
7
<?php //CREDENTIALS FOR DB define ('DBSERVER', 'localhost'); define ('DBUSER', 'root'); define ('DBPASS',''); define ('DBNAME',’phphurdles’); //LET'S INITIATE CONNECT TO DB $connection = mysqli_connect(DBSERVER, DBUSER, DBPASS,DBNAME) or die("Can't connect to server. Please check credentials and try again"); //CREATE QUERY TO DB AND PUT RECEIVED DATA INTO ASSOCIATIVE ARRAY if (isset($_REQUEST['query'])) { $query = $_REQUEST['query']; $sql = mysqli_query ($connection,"SELECT zip, city FROM zips WHERE city LIKE '%{$query}%' OR zip LIKE '%{$query}%'"); $array = array(); while ($row = mysqli_fetch_array($sql)) { $array[] = array ( 'label' =&gt; $row['city'].', '.$row['zip'],&lt;br ?--> 'value' =&gt; $row['city'],
);
}
//RETURN JSON ARRAY
echo json_encode ($array);
}
?>

Here is the source file for our fellow mates to try. Download Here
Now, Let’s try the name of the cities like Delhi etc to get the result as a suggested city.
We hope this tutorial is helpful for you guys!

You can also visit our other trending topics:

ANIMATED AJAX RECORD DELETION USING JQUERY PHP

GENERATE QR CODE WITH PHP USING GOOGLE CHART API

CODEIGNITER GEOLOCATION LIBRARY

Guys feel free to share your problems with us, comment or mail us at phphurdle@gmail.com.You can also share your experiences in our new section write for us where you can write your own tutorials and can help your fellows.
Because Hurdles aren’t really Hurdles.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *