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

from here

What is this bit doing .data( "autocomplete" ) I though data was used to attach key value pairs to dom elements as part of data-foo attribute. But that doesn't seem the case here ?

Community
  • 1
  • 1
NimChimpsky
  • 46,453
  • 60
  • 198
  • 311
  • Do any one have an idea how to append the above entire return to span which is also created in the widget... – mandava Mar 20 '13 at 12:34

1 Answers1

2

As per the documentation :

  • .data(name, value) is the setter : it attaches value to the name key
  • .data(name) is the getter : it returns the value attached to the name key

In this case, the value is an object (which stores data about the autocomplete instance bound to the node), and this object is modified in place.

It is a common pattern in the jQuery library to have a function trigger different actions depending on its arguments :

  • $(selector).click(myFunction) binds a handler to the nodes, $(selector).click() triggers the click event
  • in jquery-ui, $sel.widget('option', name, value) will generally allow you to change an option after a widget has been created, $sel.widget('option', name ) will allow you to get the value
  • etc ...
LeGEC
  • 46,477
  • 5
  • 57
  • 104
  • ah of course, so it returns the autocomplete function, then changes the renderItem property of autocomplete to the function supplied... ? – NimChimpsky Nov 08 '12 at 11:29
  • yes : on its creation, the automcomplete widget creates a configuration object, and stores it with the node using the `.data()` function. You can then access it with the `autocomplete` key. – LeGEC Nov 08 '12 at 11:39