jQuery UI Autocomplete Formatting for Multiple Elements

Question

I have the jQuery UI Autocomplete setup to my liking and working perfectly, but there is one fatal flaw. In my autocomplete I use a custom display like this example. I have something very similar built but with on exception...

The only difference is that I have multiple autocomplete elements of the same class on that one page. Only the first element shows the extra data line, the rest only show the basic autocomplete.

I can get the desired result by just iterating all of those class elements and calling the autocomplete on them, but I was hoping there was a better way of calling it once and having it "just work".

Here's how I'm adding the extra line:

.data( 'autocomplete' )._renderItem = function( ul, item ) {
  return $( '<li></li>' )
  .data( 'item.autocomplete', item )
  .append( '<a>' + item.label + '<br/><small>' + item.desc + '<small></a>' )
  .appendTo( ul );
};

I should note that I'm not getting any console exceptions at all.

I am having the same issue, did you ever get an answer?

Ben Finkel
– Ben Finkel

2011-05-16 18:37:47 +00:00
Commented May 16, 2011 at 18:37 — Ben Finkel
– Ben Finkel, Commented May 16, 2011 at 18:37

Ben Finkel · Accepted Answer · 2011-05-16 18:50:22Z

2

The only way I can make this work is by changing my code from:

addautocomplete($('.tagEntry'));

To:

$('.tagEntry').each(function() {
     addautocomplete(this);
});

answered May 16, 2011 at 18:50

Ben Finkel

4,8137 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Scheper Over a year ago

This isn't what I would've expected, either. Hopefully addautcomplete adds the same function to each element, to save resources. I only use jQuery for prototyping these days, but I wonder if this is a bug, or if the authors decided to only have autocomplete work on the first selected element, and not all selected elements, and if so, why.

Josiah Ruddell · Accepted Answer · 2011-02-08 19:09:30Z

2

You simply need to override the function via the object prototype, instead of on a single instance.

$.ui.autocomplete.prototype._renderItem = function( ul, item ) {
  return $( '<li></li>' )
  .data( 'item.autocomplete', item )
  .append( '<a>' + item.label + '<br/><small>' + item.desc + '<small></a>' )
  .appendTo( ul );
};

Overwrite the function before activating any autocompletes, but after the script has loaded.

answered Feb 8, 2011 at 19:09

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

5 Comments

sshefer Over a year ago

Thanks Josiah - One issue though. I have multiple autocompletes on the same page that pull from different sources, only this one class requires a description.

Josiah Ruddell Over a year ago

@sshefer - Then you can do it the way you are. $('#selector-for-particular-autocomplete').data( 'autocomplete' )._renderItem. Remember that data is associated with an element. If you need to change some data associated with a particular element make sure your selector is unique.

sshefer Over a year ago

That doesn't solve the problem. Only the first autocomplete with that class shows the extra data, not the rest of them. Am I doing something wrong?

Josiah Ruddell Over a year ago

@sshefer - Yes. Add a special class to the autocomplete that you want to behave differently, then use that class (or id) selector to overwrite the instance function _renderItem

sshefer Over a year ago

I am currently doing that ($('input.myclass').data('autocomplete')._renderItem) but only the first input with that class gets the extra line rendered. I have 3 more on that page that get the default autocomplete with just the item.label. There are 3 identical inputs - only the first one loaded on the page gets the extra description line, the others do not. The only way I have found to do this was to iterate over each one when the page loads.

Bo Persson · Accepted Answer · 2011-07-20 22:18:25Z

2

Alternatively:

$(..).autocomplete(..).each(function () {
   $.data(this, "autocomplete")._renderItem = function (ul, item) { ... } })

edited Jul 20, 2011 at 22:18

Bo Persson

92.9k31 gold badges153 silver badges211 bronze badges

answered Jul 20, 2011 at 10:46

glut

211 bronze badge

Comments

Albatrosz · Accepted Answer · 2022-02-13 19:13:19Z

0

I had the same issue as sshefer and I got the best solution for it:

Change the

.autocomplete( "instance" )._renderItem = function( ul, item )

by

$( ".input_class" ).each(function(){
    $( this ).autocomplete( "instance" )._renderItem = function( ul, item )...
});

answered Feb 13, 2022 at 19:13

Albatrosz

3191 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery UI Autocomplete Formatting for Multiple Elements

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related