如何在我自己的自动完成框中添加来自Google建议的建议

时间:2011-03-22 16:53:38

标签: jquery html autocomplete

以下代码显示了一个自动完成功能,它只使用我给出的数据。我希望能够更改数据源,以便在使用自动完成时,将显示常见的Google搜索。我怎么能这样做?

<html>
    <head>
        <script type="text/javascript"
        src="http://www.google.com/jsapi?key=ABQIAAAARh4zAaoctlNef6M1fBHLSRT_pkQkDorgHY-QpTBEqS9oVy079BTA6a35AAdpXz6ExAMdICz8lNWRVA"></script>
        <script>
            google.load("jquery", "1.4.2");
            google.load("jqueryui", "1.8.2");
        </script>
    </head>

    <body>
        <script>
                $(document).ready(function () {
                    var myData = ["One", "Two", "Three"];
                    $("#myTestField").autocomplete({
                        source: myData
                    });
                });
        </script>

        <form>
        <input type="text" id="myTestField" />
        </form>

    </body>


</html>

2 个答案:

答案 0 :(得分:0)

正如您在示例代码中看到的那样,myData数组中定义了可能性。您需要设置php(或任何其他技术)服务器端脚本以基于起始字符串返回数据。该数据将通过AJAX进行轮询并由自动完成使用。

答案 1 :(得分:0)

我没有找到直观的示例代码,所以我会在这里使用ASP.NET MVC为自动完成搜索框添加基本内容。

jquery的:

<script>
    $(function () {
        $("#search").autocomplete({
            source: '/Search'
        });
    });
</script>

ASP.NET MVC:

public ActionResult Search(string term)
{
    List<string> results = new List<string>();

    foreach (var x in y) // where y is what you are searching
    {
         if (x.Contains(term))
             results.Add(x);
    }

    return Json(results);
}