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>
Automatically complete the test </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>
/// Quick query
/// </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 );
}