jQuery autocomplete example

Question

Where can you download this example?
http://jqueryui.com/demos/autocomplete/#remote

jQuery doesn't make the PHP available, so I don't know how to structure the data or how to use it.

I don't see a download button on the page or any instructions on how the PHP should be built to integrate with jQuery UI, I'm not sure why their website doesn't make it easy for developers.

Answer 1

I think I found a great resource
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

Here's the document from that site

<?php

    //connection information
    $host = "localhost";
    $user = "root";
    $password = "your_password_here";
    $database = "test";
    $param = $_GET["term"];

    //make connection
    $server = mysql_connect($host, $user, $password);
    $connection = mysql_select_db($database, $server);

    //query the database
    $query = mysql_query("SELECT * FROM friends WHERE name REGEXP '^$param'");

    //build array of results
    for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
        $row = mysql_fetch_assoc($query);

        $friends[$x] = array("name" => $row["name"]);       
    }

    //echo JSON to page
    $response = $_GET["callback"] . "(" . json_encode($friends) . ")";
    echo $response;

    mysql_close($server);

?>

Answer 2

From the Overview:

A data source can be:

• an Array with local data
• a String, specifying a URL
• a Callback

In this specific case, the setup is uses the second option:

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

So, it doesn't really matter how, but here is the JSON that search.php returns. This should satisfy your complaint of "I don't know how to structure the data or how to use it."

[ { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Muscicapa striata", "label": "Spotted Flycatcher", "value": "Spotted Flycatcher" }, { "id": "Branta canadensis", "label": "Greater Canada Goose", "value": "Greater Canada Goose" }, { "id": "Haematopus ostralegus", "label": "Eurasian Oystercatcher", "value": "Eurasian Oystercatcher" }, { "id": "Aythya marila", "label": "Greater Scaup", "value": "Greater Scaup" }, { "id": "Corvus corone", "label": "Carrion Crow", "value": "Carrion Crow" }, { "id": "Sylvia atricapilla", "label": "Blackcap", "value": "Blackcap" }, { "id": "Hydroprogne caspia", "label": "Caspian Tern", "value": "Caspian Tern" }, { "id": "Bubulcus ibis", "label": "Cattle Egret", "value": "Cattle Egret" }, { "id": "Aythya valisineria", "label": "Canvasback", "value": "Canvasback" }, { "id": "Aythya affinis", "label": "Lesser Scaup", "value": "Lesser Scaup" }, { "id": "Anas falcata", "label": "Falcated Duck", "value": "Falcated Duck" } ]

But as to "how"... to have PHP output a JSON string, simply use json_encode($arr) on something like:

$arr = array(
  "foo" => "bar",
  "baz" => "true",
  "thinger" => "thing"
);

Complete reference: http://nz.php.net/json_encode

Answer 3

Here's an example of the Page_Load from a regular aspx which works with autocomplete. The GetSCACs method just returns a string representing a JSON array.

    protected void Page_Load(object sender, EventArgs e)
    {
        // Clear out the buffer
        Response.ClearHeaders();
        Response.ClearContent();
        Response.Clear();

        // Do not cache response
        Response.Cache.SetCacheability(HttpCacheability.NoCache);

        // Set the content type and encoding for JSON
        Response.ContentType = "application/json";
        Response.ContentEncoding = Encoding.UTF8;

        string query = Request["term"];

        string scacs = GetSCACs(query);
        Response.Write(scacs);

        // Flush the response buffer
        Response.Flush();

        // Complete the request.  NOTE: Do not use Response.End() here,
        // because it throws a ThreadAbortException, which cannot be caught!
        HttpContext.Current.ApplicationInstance.CompleteRequest();
    }