ASP.NET MVC3 jQuery Autocomplete

    <link href="@Url.Content(" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content(" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.8.0.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.23.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/modernizr-1.7.js")" type="text/javascript"></script>

html

<p>

    自動完成測試</p>

<input type="text" id="tel" />

<br />

<br />

<input id="city" />

<br />

<br />

<input id="custel" />

javascript

<style>

    #tel, #city, #custel

    {

        width: 25em;

    }

</style>

<script type="text/javascript">

    $(function () {

        var availableTags = [

   "ActionScript",

   "AppleScript",

   "Asp",

   "BASIC",

   "C",

   "C++",

   "Clojure",

   "COBOL",

   "ColdFusion",

   "Erlang",

   "Fortran",

   "Groovy",

   "Haskell",

   "Java",

   "JavaScript",

   "Lisp",

   "Perl",

   "PHP",

   "Python",

   "Ruby",

   "Scala",

   "Scheme"

  ];

        $("#tel").autocomplete({

            source: availableTags

        });

        $("#city").autocomplete({

            source: function (request, response) {

                $.ajax({

                    url: "http://ws.geonames.org/searchJSON",

                    dataType: "jsonp",

                    data: {

                        featureClass: "P",

                        style: "full",

                        maxRows: 12,

                        name_startsWith: request.term

                    },

                    success: function (data) {

                        response($.map(data.geonames, function (item) {

                            return {

                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

                                value: item.name

                            };

                        }));

                    }

                });

            },

            minLength: 2,

            open: function () {

                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");

            },

            close: function () {

                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");

            }

        });

        $("#custel").autocomplete({

            source: function (request, response) {

                $.ajax({

                    url: "@Url.Action("QuickSearchTel", "Home")",

                    type:"POST",

                    dataType: "json",

                    data: {tel: request.term},

                    success: function(data) {

                        response($.map(data, function(item) {

                            return {

                                label: item.label,

                                value: item.value

                            };

                        }));

                    }

                });

            },

            open: function () {

                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");

            },

            close: function () {

                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");

            }

        });

    });

</script>

controller

        /// <summary>

        /// 快速查詢

        /// </summary>

        /// <param name="tel"></param>

        /// <returns></returns>

        [HttpPost]

        public ActionResult QuickSearchTel(string tel)

        {

            var context = new CRMEntities();

            var tels = context.tb_CusTel

                .Where(r => r.FTel.Contains(tel))

                .Take(10)

                .OrderBy(r => r.FTel)

                .Select(r => new { label = r.FTelType + ":" + r.FTel, value = r.FTel });

            return Json(tels, JsonRequestBehavior.AllowGet);

        }