Autocomplete Textboxen mit ASP.NET MVC und jQuery UI

Written on October 28, 2010

Jeder kennt den Autocomplete-Effekt, der Benutzereingaben in Textboxen vervollständigt bzw. Vorschläge für passende Suchbegriffe liefert:

Ein Beispiel für autocomplete

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:

Die benötigten jQuery.UI Files

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:

ErgebnisseA

Die Beispiel-Solution kann hier heruntergeladen werden:

MvcJQueryAutocompleteSimple.zip (345,58 kb)

DotNetKicks-DE Image