Question

I am using an Autocomplete jquery plugin in my ASP.NET site, and I cannot seem to track down what I am doing wrong on this new site. Mind you I have this 100% working in another ASP.NET site of mine, and have gone through it with a fine tooth comb comparing settings to this new project and cannot find the difference.

What is happening is that everything is wired up, the Http Handler is serializing the data to json, and writing it to the reposnse without error. The box even behaves like it is working, getting smaller as I type in more letters, but no text is displayed. I would swear this is a CSS issue, but looking at the source with the Developer toolbar, I see that the rendered list is incomplete. Here is what I see from my site that does not work:

<li jQuery16208584441255029163="12"/>

Here is what I see from my working site using the exact same plugin, CSS, references, code, etc.:

<li class="ui-menu-item" role="menuitem" jQuery16205959569234760148="7">
    <a tabIndex="-1" class="ui-corner-all" jQuery16205959569234760148="33">
        Text - John Smith 

What am I missing here? All the code I debug is working perfectly and the results exist when being written to the HttpResponse as json. Any ideas? Thanks!

Answer 1

Arrrghhh. After a lot of frustration I tracked down the issue. I used a LINQ query to populate a simple DTO class with the following (3) properties:

id, label, value

…well I had modeled the class after an example I had seen, but don’t typically create properties in all lower case values, so this morning I changed them to:

ID, Label, Value.

Well that innocent change was the culprit. Those properties get written to the reponse in the json and are parsed by the jQuery .js file named jquery.ui.autocomplete.js. It contains the following code (I searched down after the fact to explain this post in detail, because normally I don’t care about the innerworkings of the jQuery files; I just care that they work!):

    return $.map( items, function(item) {
        if ( typeof item === "string" ) {
            return {
                label: item,
                value: item
            };
        }

Yep the case sensitive values were not picking up my upper case names from the jSON and caused nothing to be rendered in the box.