CODEWITHSUNDEEP
jqueryasp.netjquery-autocomplete
yanyi
yanyi

Reputation: 61

Formatting and redirecting users (w/ jQuery UI Autocomplete)

I'm new to jQuery and Stack Overflow. I'm doing my school project and have implemented the basic autocomplete search to work on my group's ASP.NET web application. I went along with this guide: http://www.magic-dev.com/autocomplete-textbox-aspnet-database.htm.

I can search for names (taken from the database), but what I'm trying to do is to allow the user to select the name (on clicking a name) from the result, and redirect them to a profile page (e.g. profile.aspx?id=25).

I have searched on Stack Overflow and came across Redirecting users on select from autocomplete?. Tried implementing the codes on that question, but to no avail.

The current result for the search box is something like this (format [user's ID]-[Name]):

25-Dennis Ferrell

I do not want to display the ID in the result, but only show the name. The ID was added into it because I wanted to use the ID for profile.aspx?id=25.

** EDIT 1 **

I read that formatItem and formatResult are both depreciated from jQuery UI (http://www.learningjquery.com/2010/06/autocomplete-migration-guide). So right now, I got the code to redirect the user on click, but the format is still 25-Dennis Ferrell.

Here's my updated code:

       $('#<%= 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];
            }
        });

Can anyone help me out with the formatting? Just want to remove the 25- from 25-Dennis Ferrell and use the 25 to redirect the user via the ID.

** EDIT 2 **

I tried doing this: 

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

The result will be Dennis Ferrell, but the 25 can't be passed into the select: function (which is needed for redirecting the user).

Upvotes: 4

Views: 585

Answers (3)

yanyi
yanyi

Reputation: 61

Okay, so I got it to split. The result in the search box will show Dennis Ferrell while the select: function got the ID value of 25 in. Not the best answer, I think, but still, here's the code for the success: function:

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

And the code for the select: function:

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

Upvotes: 2

Ankur Loriya
Ankur Loriya

Reputation: 3534

you can use 

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

Upvotes: 1

DerDee
DerDee

Reputation: 392

You should get the id from ui.item.id within the select function. 

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

hope it helps

Upvotes: 1

Related Questions