Creating an Autosuggest Textbox with JavaScript, Part 3 - Page 2	2.6/5.0 (11 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Nicholas C. Zakas February 13, 2006

Creating Server-Side Logic

Whenever you deal with client-server communication using JavaScript, you need to determine the best way to facilitate that interaction. What should your JavaScript code expect to receive back from the server? HTML? XML? Plain text? The answer may surprise you: JavaScript. Yes, the fastest and easiest thing for JavaScript to understand from the server is JavaScript code that can be passed into the eval() function. More specifically, I prefer to use the JSON syntax first described by Douglas Crockford. This simple syntax uses array and object literals to represent data instead of using more verbose XML. For the purposes of this article, this means that what you should return from the server must look like this:

["suggestion1", "suggestion2", "suggestion3"]

This would then allow the client-side JavaScript to create an array of suggestions simply by doing this:

var aSuggestions = eval(sJSONFromServer);

No messy text parsing or array building needed! But how to output this from the server? You need only create a page in your favorite server-side language to output this text. Here's a simple PHP version of the case insensitive matching algorithm developed earlier in this article:

<?php
    header("Content-Type: text/plain; charset=UTF-8");

    $states = array(
        "Alabama", "Alaska", "Arizona", "Arkansas",
        "California", "Colorado", "Connecticut",
        "Delaware", "Florida", "Georgia", "Hawaii",
        "Idaho", "Illinois", "Indiana", "Iowa",
        "Kansas", "Kentucky", "Louisiana",
        "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon",
        "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
        "Tennessee", "Texas", "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming"
    );

    $suggestions = array();

    if (strlen($userInput) > 0){

        $userInputLC = strtolower($userInput);

        for ($i=0; $i < count($states); $i++) {

            $stateLC = strtolower($states[$i]);

            $result = strpos($stateLC, $userInputLC);
            if ($result !== false && $result == 0) {
                array_push($suggestions, $userInput.substr($states[$i], strlen($userInput)));
            }
        }
    }
?>
[<?php
    for ($i = 0; $i < count($suggestions); $i++) {
        if ($i > 0) {
            echo ",";
        }
        echo "\"".$suggestions[$i]."\"";
    }
?>]

The first step on this page is to set the content type to text/plain, just to make sure this page doesn't trigger any special behaviors from the server or browser when it runs. Next, the algorithm is converted into PHP code, building up an array of suggestions and storing it in the $suggestions variable. The last part outputs the suggestions in an array literal.

The $userInput variable is passed in the query string of the page, like this:

http://yourhost.com/suggestions.php?userInput=mIs

This variable contains what the user has typed to match it against a list of possible suggestions.

Note that even though this page simply duplicates the functionality of the suggestion provider by matching the input to a list of arrays, you can easily change the page to run a search or query a database to come up with a list of possible suggestions as well.

Next page