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 :

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"));
    }
}

Mise à jour du formulaire

Créer dans la vue un contrôle de saisie de type text :

1

<input type="text" id="MainLanguage" />

Ajouter ensuite le code javascript suivant afin de mettre en place l’autocompletion :

1
2
3
4
5
6
7


$(document).ready(function () {
    var languages = ["Basic", "C", "C++", "CSharp", "CSS", "Javascript", "HTML"]

    $("#MainLanguage").autocomplete({
        source: languages
    });
});

Résultat

Lancer ensuite le projet et commencer une saisie dans le contrôle :

Résumé

Rechercher et installer le package NuGet jQuery.UI.Combined
Référencer dans le fichier BundleConfig.cs le fichier jquery-ui-{version}.js et le fichier jquery-ui.css
Ajouter dans le formulaire un contrôle de saisie de type input
Ajouter et configurer la méthode autocomplete sur le contrôle