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

}