ASP.NET MVC3 jQuery Autocomplete

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/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);
        }