Formater et rediriger les utilisateurs (avec jQuery UI Autocomplete)

Question

Je suis nouveau à jQuery et à Stack Overflow. Je fais mon projet scolaire et j'ai implémenté la recherche autocomplete de base pour qu'elle fonctionne sur l'application web ASP.NET de mon groupe. J'ai suivi ce guide : http://www.magic-dev.com/autocomplete-textbox-aspnet-database.htm .

Je peux rechercher des noms (tirés de la base de données), mais ce que j'essaie de faire, c'est de permettre à l'utilisateur de sélectionner le nom (en cliquant sur un nom) à partir du résultat, et de le rediriger vers une page de profil (par ex. profil.aspx?id=25 ).

J'ai cherché sur Stack Overflow et je suis tombé sur Redirection des utilisateurs lors de la sélection à partir de la saisie semi-automatique ? . J'ai essayé d'appliquer les codes indiqués dans cette question, mais en vain.

Le résultat actuel de la boîte de recherche ressemble à ceci (format [ID de l'utilisateur]-[Nom] ):

25-Dennis Ferrell

Je ne veux pas afficher l'ID dans le résultat, mais seulement le nom. L'ID a été ajouté parce que je voulais utiliser l'ID pour profil.aspx?id=25 .

** EDIT 1 **

J'ai lu que formatItem y formatResult sont tous deux dépréciés par rapport à jQuery UI ( http://www.learningjquery.com/2010/06/autocomplete-migration-guide ). Donc pour l'instant, j'ai obtenu le code pour rediriger l'utilisateur au clic, mais le format est toujours 25-Dennis Ferrell .

Voici mon code mis à jour :

       $('#<%= searchMenu.ClientID %>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "PredictiveSearch.asmx/GetAllNames",
                    data: "{'nameKeyword':'" + request.term + "'}",
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        response(data.d);
                    }
                });
            }, 
            select: function (event, data) {
                window.location = "profile.aspx?id=" + data.item.value.split("-")[0];
            }
        });

Quelqu'un peut-il m'aider pour la mise en forme ? Je veux juste enlever le 25- de 25-Dennis Ferrell et utiliser le 25 pour rediriger l'utilisateur via l'ID.

** EDIT 2 **

J'ai essayé de le faire :

success: function (data) {
    response($.map(data.d, function (item) {
        return item.split("-")[1];
    }));
}

Le résultat sera Dennis Ferrell pero el 25 ne peut pas être passé dans le select: (qui est nécessaire pour rediriger l'utilisateur).

Answer 1

D'accord, j'ai réussi à le diviser. Le résultat dans la boîte de recherche sera Dennis Ferrell tandis que le select: a obtenu la valeur de l'ID de 25 dans. Ce n'est pas la meilleure réponse, je pense, mais tout de même, voici le code pour l'élément success: fonction :

success: function (data) {
    response($.map(data.d, function (item) {
        return {
            id: item.split("-")[0],
            value: item.split("-")[1],
        }
    }));
}

Et le code pour le select: fonction :

select: function (event, data) {
    //use data.item.value if want to get the name [Dennis Ferrell]
    window.location = "profile.aspx?id=" + data.item.id;
}

Answer 2

Vous devez obtenir l'identifiant à partir de ui.item.id dans la fonction select.

location.href = "profile.aspx?id=" + ui.item.id

J'espère que cela vous aidera

Answer 3

Vous pouvez utiliser

window.location = "page.aspx?userid="+ui.item.id;