HowTo: ASP.NET MVC und jQuery Autocomplete
Eine Autocomplete Funktion für Input Felder ist spätestens seit Google Suggest bei vielen bekannt. Für den Benutzer ist solch eine Funktion sehr praktisch und auch mit jQuery und ASP.NET MVC ist dies recht schnell umgesetzt.
Schritt 1: jQuery Autocomplete Plugin besorgen
Es gibt viele jQuery Autocomplete bzw. Suggest Plugins. Ich habe mich für dieses (das vermutlich bekannteste) entschieden:
Schritt 2: ASP.NET MVC Projekt erstellen und jQuery + Plugin einbinden
In dem Download ZIP findet man zwei interessante Datein:
- jquery.autocomplete.pack.js
- jquery.autocomplte.css
Diese packt man mit in Ordner im ASP.NET MVC Projekt und bindet diese noch in der Master Page ein:
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.autocomplete.pack.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
jQuery wurde natürlich ebenfalls noch referenziert. Da wir im nächsten Schritt noch ein Javascript nach dem “OnLoad” ausführen wollen, habe ich noch ein ContentPlaceHolder für Scripts eingefügt.
Schritt 3: Input Feld + Javascript schreiben
Das Input Feld:
<p>
<input type="text" id="search" />
</p>
Und nun in dem ContentPlaceHolder das Javascript:
<asp:Content ID="script" ContentPlaceHolderID="ScriptContent" runat="server">
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#search").autocomplete('<%=Url.Action("Search") %>', {
width: 300,
multiple: true,
matchContains: true,
dataType: 'json',
parse: function(data) {
var rows = new Array();
for(var i=0; i<data.length; i++){
rows[i] = { data:data[i], value:data[i], result:data[i] };
}
return rows;
},
formatItem: function(row, i, n) {
return row;
}
});
});
</script>
</asp:Content>
Am wichtigsten ist das “autocomplete” mit der URL. Alles weitere ist besser auf der jQuery Plugin Projektseite erklärt.
Hinweis: In meinem AJAX und ASP.NET MVC Blogpost erkläre ich noch andere AJAX Features.
Schritt 4: Controller + Action
Wie in dem Javascript zu sehen, wird per AJAX etwas an eine “Search” ActionMethod geschickt. Die Methode habe ich mit in den “Home” Controller gepackt:
public JsonResult Search(string q, int limit)
{
List<string> result = new List<string>();
for(int i = 0; i <= limit; i++)
{
result.Add(q + "xxx...");
}
return Json(result);
}
Das jQuery Plugin kann sehr gut mit JSON umgehen, daher nutzen wir das JsonResult und hängen an den Suchparameter “q” (das ist das “Suchwort”, was wir über das Plugin verschicken) ein paar Buchstaben dran.
An dieser Stelle müsste man entsprechend seine Suchlogik einbauen.
Fertig
Recht einfach zu realisieren und durch das Plugin gibt es noch dutzende Möglichkeiten. So kann man sich überall mit Javascript einhängen – was passiert wenn man etwas ausgewählt hat, wieviele Items sollen angezeigt werden etc. Hier kann man sich gut austoben 
Ein weiteres Beispiel findet man auf diesem Blog.
About the author
Written by Robert Mühsig
Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.
Christian
16. September 2010
kleiner Hinweis noch – inzwischen funktioniert das Beispiel nicht mehr, zumindest in neueren Browsern.
Abhilfe schafft die Anpassung:
“return Json(result);” in
“return Json(result, JsonRequestBehavior.AllowGet);”