problem with jquery autocomplete

Question

I am using the jquery autocomplete to fill the users list. In the document.ready, i am calling the autocomplete json to get the users list.

When i type a valid username(or anything) in the textboxes before the autocomplete json call finishes, its not showing the autocomplete options(autocomplete not working for valid characters also).

And when i click outside the textbox and on again trying, its working..

What may be the problem with the autocomplete when i try to type before the autocomplete json call finishes?

The code for autocomplete is:

 $.getJSON("/User/GetAllUsers/?t=" + new Date(), {},
        function(data) {
            if (data != null) {
                $("#UserName").autocomplete(data, { mustMatch: false, matchContains: 4, max: 50,
                    formatItem: function(row) {
                        return row.FirstName + " " + row.LastName + " [" + row.LoginName + "]";
                    },
                    formatResult: function(row) {
                        return row.FirstName + " " + row.LastName + " [" + row.LoginName + "]";
                    }
                });
            }
        });

Answer 1

If you type in the textbox and then the JSON call finishes, and after setting your autocomplete..

EDIT: forget what I said: You can manually trigger a search with the search method

Try to trigger a change event on the textbox instead? http://docs.jquery.com/Events/trigger

Answer 2

The callback method that sets the autocomplete piece up is only executed after the getJSON call is completed.

You can do one of two things: 1. Build a blocking mechanism that blocks the UI/textbox until the json call is completed. In essence, when the autocomplete tie-up has been finished. 2. Use the autocomplete plugin to directly query the GetAllUsers method:

$("#UserName").autocomplete("/User/GetAllUsers/?t=" + new Date(), { mustMatch: false, matchContains: 4, max: 50,
                formatItem: function(row) {
                    return row.FirstName + " " + row.LastName + " [" + row.LoginName + "]";
                },
                formatResult: function(row) {
                    return row.FirstName + " " + row.LastName + " [" + row.LoginName + "]";
                }
            });

You would then have to filter the users on the server side using the queryParameter (q) which will contain the required search term.