I built a modal dialog using the ModalPopupExtender from the AjaxControlToolkit. In that dialog, I'm trying to use the jQuery Autocomplete feature on a textbox. The values for the autocompletion are fetched from a webservice.

I can see that the webservice is returning a result set, and I can see that being picked up in the Autocomplete code. However, the list is not displayed to the user to pick from.

I thought this might be a z-Index issue, so I specified 'z-index: 9999 !important;'  for the '.ui-autocomplete' CSS class in my stylesheet. But that doesn't make a difference.

This is my jQuery code:

1.      $('#ctl00_cphMainContent_tcOuter_TabPanel1_fvJournalEntry_cbEntryDebtorID_txtUserName').autocomplete({

             source: function( request, response ) {

                   $.ajax({

                     type: 'POST',

                     contentType: 'application/json; charset=utf-8',

                           url: '/wsAdmin/JSON_Users.asmx/GetListOfUsersByName',

                           data: '{"AllowMainOccupantsOnly": false, "AllowOwnFinanceOnly": false, "AllowExUsers": true, "UseFormalName": false, "LastNameFirst": true, "UserCatID": 27, "NameLike": "' + request.term + '"}',

                           dataType: 'json',

                           dataFilter: function(data) { return data; },

                           success: function( data ) {

                                   $.map(data.d, function(item) {

                                          return {

                                              label: item.Name,

                                 value: item.ID

                                          }

                                   });

                           },

                           error: function(XMLHttpRequest, textStatus, errorThrown) {

                               alert(textStatus);

                           },

                           select: function( event, ui ) {

                                   alert(ui.item.value);

                         $('#ctl00_cphMainContent_tcOuter_TabPanel1_fvJournalEntry_cbEntryDebtorID_numUserID').val(ui.item.value);

                         $('#ctl00_cphMainContent_tcOuter_TabPanel1_fvJournalEntry_cbEntryDebtorID_txtUserName').removeClass('longWatermarked').addClass('longTextField');

                           }

                   });

             },

             minLength: 2

         });

What am I missing?