Jeder kennt den Autocomplete-Effekt, der Benutzereingaben in Textboxen vervollständigt bzw. Vorschläge für passende Suchbegriffe liefert:
Dieser Effekt lässt sich mit ASP.NET MVC und jQuery.UI.Autocomplete leicht selbst entwickeln.
Zunächst benötigt man eine aktuelle Version von jQuery.UI, die man hier herunterladen kann.
Aus dem ZIP-File werden die Files “jquery-ui-1.8.5.custom.min.js” (aus dem Unterordner JS) und “jquery-ui-1.8.5.custom.css” (aus dem Unterordner CSS) benötigt und in die jeweiligen Ordner in der ASP.NET MVC-Solution kopiert:
Im Masterpage-File werden diese sowie die jquery-1.4.1.min.js referenziert:
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.8.5.custom.css" type="text/css" />
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
</head>
In der Index-View des HomeControllers platzieren wir eine Textbox mit der Id “customers”:
<input type="text" id="customers" />
Direkt im Anschluß folgt der eigentliche jQuery.UI.Script-Block:
<script type="text/javascript">
$(function () {
$('#customers').autocomplete({
source: '<%= Url.Action("Search") %>',
minLength: 1
});
});
</script>
Schließlich müssen wir unserem HomeController noch ein JsonResult mit dem Namen "Search" (dieser wird in der Url.Action im eben eingefügten jQuery-Script referenziert) hinzufügen:
public JsonResult Search(string term) {
List<string> result =
_customers.Where(s => s.ToLower().StartsWith(term.ToLower())).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
Die Liste "_customers" wird im Konstruktor des Controllers erzeugt:
public HomeController() {
_customers = new List<string>()
{
"Alfreds Futterkiste",
"Ana Trujillo Emparedados y helados",
"Antonio Moreno Taquería",
"Around the Horn",
"Frankenversand",
"France restauration",
"Königlich Essen",
"Toms Spezialitäten"
};
}
Das Resultat sieht im Browser wie folgt aus:
Die Beispiel-Solution kann hier heruntergeladen werden:
MvcJQueryAutocompleteSimple.zip (345,58 kb)
Currently rated 1.0 by 3 people
- Currently 1/5 Stars.
- 1
- 2
- 3
- 4
- 5