Howto: Textbox jQuery Autocomplete avec ASP.NET MVC 5

Cet article explique comment configurer l’auto-completion dans un champ texte, dans un formulaire utilisant jQuery et ASP.NET MVC 5.

Configuration du projet

Lancer la console NuGet, rechercher et installer le package jQuery.UI.Combined :

Package NuGet jQuery.UI.Combined

Mettre à jour le fichier BundleConfig.cs pour référencer les fichiers jQuery UI (JS et CSS) :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class BundleConfig
{
    // Pour plus d'informations sur le regroupement, visitez https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Utilisez la version de développement de Modernizr pour le développement et l'apprentissage. Puis, une fois
        // prêt pour la production, utilisez l'outil de génération à l'adresse https://modernizr.com pour sélectionner uniquement les tests dont vous avez besoin.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/jquery.unobtrusive-ajax.js",
                    "~/Scripts/bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/themes/base/jquery-ui.css",
                    "~/Content/site.css"));
    }
}
[Lire]