jQuery UI Autocomplete stopped working.

Question

For some reason jQuery UI's autocomplete has stopped working for me. I get the same error as is described on this webpage.

I've copied the content of the query from that webpage below, hoping that somebody here will be able to answer it.

Thanks!

I am using Jquery UI Autocomplete to get a list of names. But for some reason I am getting error

---

$('#repName').removeAttr('readonly').focus(function () {
                   $(this).val('');
               }).autocomplete({
                   source: function (request, response) {
                       tagId = $('#TagId').val();
                       $.ajax({
                           url: '/Developement/GetRepName', type: 'POST', dataType: 'json',
                           data: { searchText: request.term, maxResults: 10, tagId: tagId },
                          success: function (data) {
                              response($.map(data, function (item) {
                                  return {
                                      label: item.Name,
                                      value: item.RepId,
                                      id: item.RepId
                                  }
                              }))
                          }
                      })
                  },
                  select: function (event, ui) {
                      commissionAllicationModifications(ui.item.id, 0, 'A');
                  }
              });

---

I have no clue why this is happening. I am using Jquery UI 1.8.1

I would appreciate any kind of help on this.

It is coming from the jQuery UI 1.8.1 file

specifically jQuery UI Autocomplete 1.8.1

---

 .menu({
               focus: function (event, ui) {
                   var item = ui.item.data("item.autocomplete");
                   if (false !== self._trigger("focus", null, { item: item })) {
                       // use value to match what will end up in the input, if it was a key event
                       if (/^key/.test(event.originalEvent.type)) {
                           self.element.val(item.value);
                       }
                   }
               },
               selected: function (event, ui) {
                   var item = ui.item.data("item.autocomplete");
                   if (false !== self._trigger("select", event, { item: item })) {
                       self.element.val(item.value);
                   }
                   self.close(event);
                   // only trigger when focus was lost (click on menu)
                   var previous = self.previous;
                   if (self.element[0] !== doc.activeElement) {
                       self.element.focus();
                       self.previous = previous;
                   }
                   self.selectedItem = item;
               },
*                blur: function (event, ui) {
*                    if (self.menu.element.is(":visible")) {
*                        self.element.val(self.term);
*                   }
*               }
           })
           .zIndex(this.element.zIndex() + 1)
           // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
           .css({ top: 0, left: 0 })
           .hide()
           .data("menu");

---

It is weired though because this works flawlessly in another project. What i noticed when the code hits the [starred] section the self.menu section is undefined. Another thing of note was that it doesn't even send the request. I was thinking that it might be my focus function

---

.focus(function () {
     $(this).val('');

---

But it is not. Thank you for you help.

Answer 1

What version of jQuery core are you using?

I know of a bug related to visible detection and related to IE8. If possible, can you upgrade to the most recent jQuery on a test machine and see if that solves your problem?

If you don't feel like upgrading, you could also try hacking jQuery (UGLY!) - with this:

if (self.menu.element.is(":visible"))

becomes

if (!(self.menu.element.css('display') == 'none'))

Answer 2

It turns out that I included a plugin that defined $.fn.menu and this wrought havoc. I changed it to $.fn.fg_menu and the problem was resolved.