jQuery UI自动完成功能停止工作

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 an 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 weird though because this works flawlessly in another project. What I noticed is 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

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.

Answer 2

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'))