Search prediction based on user input

Search prediction based on user input

Facebook search has a unique facility – it instantly shows related names with associated pictures in a drop down list. This list is generated based on the user’s input and helps us understand better. For example, when we search for a friend on Facebook’s search graph; the platform returns all people, pages and groups that have a resemblance to our input string. This search prediction mechanism has been adopted in several websites on the internet.

What we learn in this tutorial is to create such a system. It’s very easy and can be accomplished with just a few steps of designing and coding.

We will now create a search prediction system step by step. The first step is to create the interface.

Building the basics

For the interface, we need to create an input field first. Search prediction mechanism needs to display the list of suggested items just below the input field. So, we create a div panel just below the input box so that it looks as if the suggestion container panel is somewhat attached to the input field.

Once the text input element is created, our users have a place to type in their search term. Now when a user types something, on a key press our script must return relevant results. Results will be contained in a different div as discussed earlier. So, our next target is to retrieve our results asynchronously via JQuery AJAX.

In our JQuery script, we call the GET method on the JavaScript keyup event. So, the event is fired each time a user types some character. Here it goes –

$(document).ready(function(){
        $('#filterfield').keyup(function(){
        var data = $(this).val();
           $.get('getall.php',{data:data},function(value){
            $('#tab').html(value).show();
        }); 
        });
    });

A very common question here is that what if the user presses backspace or delete and clears off all the characters in the input field? For this situation, the user does not get any result displayed. This checking is done in our PHP file. The value that is passed through our AJAX call is checked for its character length. If the length is 0 then the rest code is skipped.

Creating AJAX call to retrieve search prediction results

If you are still unaware of using AJAX in JQuery, try reading my article – Retrieve data using JQuery PHP.

In our next step for the search prediction project, we create the remote PHP file and compose our SQL statement in the following form –

$query2 = "SELECT * FROM fb WHERE name LIKE '$data%'";
$result2 = mysql_query($query2) 
or die();

while($row=mysql_fetch_row($result2)){
    $img = rand(1, 8);
    
    $str.= '<a href="#" class="records">
                    <img src="img/'.$img.'.png" alt="Facebook like search suggestion"/>
                    <div class="r_i">
                        <h2>'.$row[0].'</h2>
                        <span>'.$row[1].'</span>
                    </div>
                    </a>';
}

The above SQL query will return a result set of all records that start with the string passed to the PHP file as the data value. So, if the user types in “Ka” for example all records that have their names starting with the string “Ka” are returned and displayed.

The role of JQuery methods in search prediction systems

The return value that is appended as “HTML” value to our target div is a string. The HTML code is composed as string in the PHP file and added to the target div as its HTML value. This is done with the help of .html() method in JQuery.

While the records in the result set are received, the return data string is appended each time with a new set of row. Each of these rows is the HTML codes including the name fetched, type of record (user or fan page as in Facebook), etc. When they are appended together in a single string, they form a continuous HTML code block which is then placed as the HTML value for our target div.

Images in the demo are randomly generated since image addresses aren’t stored in my search prediction article example to maintain simplicity. But, you may store individual images for each profile in your server and maintain their unique URL in the database. Once this is done, you can achieve the image URL from the search results and append it to the return string in the same way.

All the best! Have a try and do let me know what you feel in the comments section

Comments are closed.