jQuery 自动完成示例

Question

在哪里可以下载此示例？
http://jqueryui.com/demos/autocomplete/#remote

jQuery 没有使 PHP 可用，所以我不知道如何构造数据或如何使用它。

我在页面上没有看到下载按钮，也没有看到关于如何构建 PHP 以与 jQuery UI 集成的任何说明，我不确定他们的网站为什么不方便开发人员使用。

Answer 1

我想我找到了一个很好的资源
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

这是来自那个网站的文档

<?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

这是一个使用自动完成的常规 aspx 的 Page_Load 示例。 GetSCACs 方法只返回一个表示 JSON 数组的字符串。

    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();
    }

Answer 3

概览：

数据源可以是：

• 包含本地数据的数组
• 一个字符串，指定一个 URL
• 回调

在这种特定情况下，设置使用第二个选项：

当使用字符串时， 自动完成插件期望 指向一个 URL 资源的字符串 将返回 JSON 数据。可以开启 同一主机或不同主机 （必须提供 JSONP）。请求 参数“term”被添加到那个 网址。数据本身可以在 与本地数据格式相同 如上所述。

所以，如何做并不重要，但这里是 search.php 返回的 JSON。这应该可以满足您对“我不知道如何构建数据或如何使用数据”的抱怨。

[ { "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" } ]

但至于“如何”...让 PHP 输出 JSON 字符串，只需使用 json_encode($arr) 即可：

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

完整参考：http://nz.php.net/json_encode