Opened 7 years ago

Closed 7 years ago

#8852 closed bug (notabug)

autocomplete doesn't work on 2nd match to jquery selector

Reported by: mdeanda Owned by: mdeanda
Priority: minor Milestone: 1.10.0
Component: ui.autocomplete Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:

Description

i'm using autocomplete on a search form that is displayed on the header and footer of my page and i use a single select to add autocomplete to it. i had to wrap the $().ac code in an $().each(...) call to fix. here is my working code sample:

	$('.contentSearchForm .searchField').each(function(index, el) {
		var ac = $(el).autocomplete({
			source: function(request, response) {
				RequestManager.send("Content.search", {query:request.term}, function(data) {
					var a = [];
					for (var i=0; i<data.items.length; i++) {
						a.push(data.items[i]);
					}
					response(a);
				});
			},
			focus: function(event, ui) {
				//don't render focus
				return false;
			},
			select: function(event, ui) {
				window.location.href = "/content/View?id=" + ui.item.id;
				return false;
			}
		}).data("autocomplete");
		if (ac) {
			ac._renderItem = function( ul, item ) {
				return $( "<li class=\"ui-ac-content\">" )
					.data( "item.autocomplete", item )
					.append( '<a><div class="topic">'
						+ item.topic + '</div><div class="title">'
						+ item.title + '</div><div class="clearboth"></div></a>' )
					.appendTo( ul );
			};
		}
	});

the issue i had was that the rendering was a bunch of empty tiny (8px?) lines with no text. there's a chance its actually related to the ._renderItem portion. maybe making this a parameter to the autocomplete call would have fixed this.

also notice the "if (ac)..." portion. if the selector matched 0 items, it would fail there. i basically modified some code from the example page.

Change History (2)

comment:1 Changed 7 years ago by tj.vantoll

Owner: set to mdeanda
Status: newpending

Hi mdeanda. Thanks for taking the time to contribute to the jQuery UI project! We're going to need a reduced test case on a site like jsFiddle to help us assess your ticket.

You can substitute a hardcoded array instead of the source function you're currently using to test this.

Please be sure to test against the git version of both jQuery UI and jQuery to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/ZgAqH/ Open the link and click to "Fork" (in the top menu) to get started.

Thanks.

comment:2 Changed 7 years ago by Scott González

Resolution: notabug
Status: pendingclosed

This is not a bug. .data() is a getter and only works on a single element. Please use the forums or StackOverflow for help.

On a side note, it's invalid to put a div inside an anchor, and item.autocomplete is deprecated in favor of ui-autocomplete-item (you shouldn't even be setting the data in 1.9.x).

Note: See TracTickets for help on using tickets.