jQuery UI autocomplete is not displaying results fetched via AJAX

Question

I am trying to use the jQuery UI autocomplete feature in my web application. What I have set up is a page called SearchPreload.aspx. This page checks for a value (term) to come in along with another parameter. The page validates the values that are incoming, and then it pulls some data from the database and prints out a javascript array (ex: ["item1","item2"]) on the page. Code:

protected void Page_Load(object sender, EventArgs e)
{
    string curVal;
    string type ="";
    if (Request.QueryString["term"] != null)
    {
        curVal = Request.QueryString["term"].ToString();
        curVal = curVal.ToLower();
        if (Request.QueryString["Type"] != null)
            type = Request.QueryString["Type"].ToString();
        SwitchType(type,curVal);
    }
}
public string PreLoadStrings(List<string> PreLoadValues, string curVal)
{
    StringBuilder sb = new StringBuilder();
    if (PreLoadValues.Any())
    {
        sb.Append("[\"");
        foreach (string str in PreLoadValues)
        {
            if (!string.IsNullOrEmpty(str))
            {
                if (str.ToLower().Contains(curVal))
                    sb.Append(str).Append("\",\"");
            }
        }
        sb.Append("\"];");
        Response.Write(sb.ToString());
        return sb.ToString();
    }
}

The db part is working fine and printing out the correct data on the screen of the page if I navigate to it via browser.

The jQuery ui autocomplete is written as follows:

$(".searchBox").autocomplete({
    source: "SearchPreload.aspx?Type=rbChoice",
    minLength: 1
});

Now if my understanding is correct, every time I type in the search box, it should act as a keypress and fire my source to limit the data correct? When I through a debug statement in SearchPreload.aspx code behind, it appears that the page is not being hit at all.

If I wrap the autocomplete function in a .keypress function, then I get into the search preload page but still I do not get any results. I just want to show the results under the search box just like the default functionality example on the jQuery website. What am I doing wrong?

Did you try running this in firefox with firebug? That way you can see what ajax methods are called and also the result codes and response. — Elad Lachmi
– Elad Lachmi, Commented May 24, 2011 at 12:03
unfortunately we can not install fire bug at this installation... — EvanGWatkins
– EvanGWatkins, Commented May 24, 2011 at 12:07
Reading the plugin page, it looks like you need to return a json array, not a javascript array. Try changing [ and ] to { and }. — Elad Lachmi
– Elad Lachmi, Commented May 24, 2011 at 12:10
This is how the result looks coming from the demo page URL: jqueryui.com/demos/autocomplete/search.php?term=bla — Elad Lachmi
– Elad Lachmi, Commented May 24, 2011 at 12:13
I have updated my code to display the page in the exact same format as the search.php page and with no avail it still does not work. — EvanGWatkins
– EvanGWatkins, Commented May 24, 2011 at 12:34

Salman Arshad · Accepted Answer · 2011-05-25 08:17:19Z

3

autocomplete will NOT display suggestions if the JSON returned by the server is invalid. So copy the following URL (or the returned JSON data) and paste it on JSONLint. See if your JSON is valid.

http://yourwebsite.com/path/to/Searchpreload.aspx?Type=rbChoice&term=Something

PS: I do not see that you're calling the PreLoadStrings function. I hope this is normal.

answered May 25, 2011 at 8:17

Salman Arshad

273k85 gold badges450 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EvanGWatkins Over a year ago

Great resource, my JSON was invalid due to an extra comma. Thanks so much!

szeliga · Accepted Answer · 2011-05-24 12:10:58Z

A couple of things to check.

Make sure that the path to the page is correct. If you are at http://mysite.com/subfolder/PageWithAutoComplete.aspx, and your searchpreload.aspx page is in another directory such as http://mysite.com/anotherFolder/searchpreload.aspx the url that you are using as the source would be incorrect, it would need to be

source: "/anotherFolder/Searchpreload.aspx?Type=rbChoice"
One other thing that you could try is to make the method that you are calling a page method on the searchpreload.aspx page. Typically when working with javascript, I try to use page methods to handle ajax reqeusts and send back it's data. More on page methods can be found here: http://www.singingeels.com/Articles/Using_Page_Methods_in_ASPNET_AJAX.aspx

HTH.

I have tried hardcoding the url into the source and it still does not seem to access the page correctly. The only way I have gotten this to work is if I hard code the values into an array in javascript, but I need this to be dynamic based off the value sent in and the extra param.

Collectives™ on Stack Overflow

jQuery UI autocomplete is not displaying results fetched via AJAX

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related