Question

I am trying to create an app which displays search results for a query as the user is typing similar to Google Instant. It doesn’t need to be under the search box like Instant but the idea is that relevant choices for a query appear as the user types.

Is there a way for me to use something similar?

Thanks

Answer 1

Here’s how I would solve the problem, using PHP and JavaScript.

You will first need to set up a server side resource to serve search results, ideally in json.

If you want to do this the right way, see this excellent tutorial on creating a REST API with PHP (it sounds like that’s the server side technology you’re using).

If you want to hack something together quickly that may not be as robust, here’s how:

First, create a php file at a given location, let’s say /api/search/search.php

It should look something like this:

<?php
    // connect to mysql

    if($_GET['q']) {
        $q = $_GET['q'];

        echo json_encode(getResults($q));
    } else {
        echo "No results";
    }

    function getResults ($q) {
        $sql = "SELECT * FROM whatever WHERE whichever LIKE '%'+"+$q+"+'%'"

        //mysql_fetch_results ...

        // loop through returned result set, create an associative array of results

        // i.e. $results = array("items" => array ( array ("link" => "#", "title" ="title"), array ("link" => "#", "title" ="title"), array ("link" => "#", "title" ="title") ))

        return $results;
    }

?>

This will return json formatted results when you do a GET request to /api/search/search.php?q=Your query here

You will need some client side code to party with the server. The basic approach is to set up an input box and every time the value changes, use jQuery’s AJAX methods ($.getJSON would work nicely here, but you could also use $.GET or $.AJAX), to send a request with the q parameter equal to the user’s query. You then attach a callback function that runs when the request is complete that parses the results and outputs them on the page. Some sample below.

$(document).ready(function () {
    // This is your datasource url. Change this to be the resource you want
    var url = "https://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=013036536707430787589:_pqjad5hr1a&alt=json";

    // Attach a function to the keypress event for the input #q
    $("q").keypress(function () {

        // Get the value of the input
        var q = $(this).val();

        // Append the query to the end of the url
        url += "&q=" + q;

        // Make an ajax request to the api, and bind a function as a callback for when the request is complete
        $.getJSON(url, function (response) {

            // Store the items object. These are your results
            var results = response.items;

            var resultList = $(buildList(results));

            $("#results").empty().append(resultList);
        });

        function buildList (results) {
            // Initialize a string to hold the html formatted results
            var htmlStr = "<ul>";

            results.each(function () {

                var result = $(this);

                // Append the result's properties to your html
                htmlStr += "<li><a href='"+result.link+"'>";
                htmlStr += result.title;
                htmlStr += "</a></li>";

            });

            htmlStr += "</ul>";

            return htmlStr;
        }
    });
});

Here’s the markup:

<input id="q" type="text" />
<div id="results"></div>

Good luck