Blog de Philippe Vialatte

5
octobre
2009

L’auto-complétion avec JQuery + un petit bug

Un article de Philippe Vialatte Comments

Depuis les deux derniers mois, des que je dois faire du JavaScript, tout passe par JQuery.

…déjà, parce que je n’aime pas me taper des document.getElementById de partout dans mon code quand un $ suffit, mais aussi pour les nombreux plug-ins disponibles, qui permettent pas mal de chose de façon plus légère que le Framework MS Ajax.

Récemment, pour un projet, il a fallu ajouter une auto-complétion a un champ, et un stockage de l’Id dans un champ caché.

Pour ca, avec JQuery, il suffit de faire, dans le fichier .aspx :

}

});

});
</script>

<div>

<asp:TextBox ID="tbUser" runat="server" SkinID="UsualTextBox"></asp:TextBox>

<asp:HiddenField ID="hidUserUID" runat="server" />

</div>

NB : le $("#<%= tbUser.ClientID %>"), ca veut dire, écrit l’id cote client de tbUser, de façon a ce que je puisse utiliser le sélecteur # de JQuery, qui sélectionne un élément du DOM par son ID ;), $ est l’alias de la classe JQuery. Pour plus d’infos, une introduction peut être trouvée ici

Ensuite, il faut ajouter dans le répertoire App_Code un fichier AjaxHandler du genre :

public class AjaxHandler : IHttpHandler {

public string _inputValue;

public void ProcessRequest(HttpContext context) {

context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

context.Response.ContentType = "text/plain";

_inputValue = context.Request.QueryString<"q">;

        string result = ObjectFactory.GetInstance<IUserService>()

                            .GetUsersForAutocompletion(_inputValue);

        context.Response.Write(result);
    }

    public bool IsReusable {

        get { return false; }

    }

}

Avec, dans le web.config, une configuration du AjaxHandler du genre:

Et du coup, si ma méthode GetUsersForAutocompletion renvoie un résultat au format :

User1|Id1;User2|Id2;…;User3|Id3

J’obtiens une jolie auto complétion en, quoi, dix minutes de travail et en ajoutant juste 30ko de JavaScript pour la bibliothèque de JQuery et trois fois rien pour les échanges Ajax…en théorie…

Pourquoi en théorie ? Parce que si j’initialise le champ dans le code-behind, des que j’attache l’auto complétion a mon textbox, ce même textbox est vide…moyen, l’effet, pour le client

Moralité, plutôt que de chercher une solution propre (mais promis, chercher la solution propre, c’est pour "dés qu’il n’y a plus le feu), le code a été remanié comme ca :

    $(document).ready(function() {

        var tmp = $("#<%=tbUser.ClientID%>").val();

        $("#<%=tbUser.ClientID%>").autocomplete("ComboUserService.aspx",

        {

            matchCase:true,

            selectOnly:1,

            lineSeparator: ‘\n’,

            cellSeparator: ‘|’,

            autoFill:false,

            onItemSelect: function(li) {

                if (li.extra) {

                    $("#<%=hidUserUID.ClientID%>").val(li.extra[0]);

                }

}

});

var tmp = $("#<%=tbUser.ClientID%>").val();

});

Et depuis, tout marche bien :D..ceci dit, si quelqu’un a une idée de l’origine du problème, ca m’aiderait bien (d’autant qu’en dehors de ca, JQuery, c’est le panard)

Laisser un commentaire

Vous devez être connecté pour poster un commentaire.

Connexion

Identifiez-vous

Créer un compte

Blog de Philippe Vialatte

Laisser un commentaire

Articles récents

Archives

Commentaires récents

Catégories

Méta

Identifiant
Mot de passe

Mot de passe oublié ?