The "Custom data and display" demo for Autocomplete (http://jqueryui.com/demos/autocomplete/#custom-data) shows how one can use a custom auto complete. However, I'm not quite sure how it is working. The source seems to imply this portion is doing it: (well, I pasted the code in - and when I did, the forum would not let me type normal text in again. nothing seemed to work well - so please just look at the portion that begins with .data)
So it seems like .data("autocomplete").renderItem handles the custom display - but I'm trying to find where this is actually documented. Can someone point out where that is in the official docs?
The entire autocomplete object is stored as a data property of #project. Therefore, in this example, you can access the underlying autocomplete object by referring to $("#project").data("autocomplete"). In the demo, this line:
Takes the autocomplete object out of the data cache and overwrites the "_renderItem" method to return something custom. It indeed is not documented anywhere. If you compare the autocomplete source with the demo, the demo's _renderItem method simply adds item.desc as a new line in each list item.
So would you then say this is not something folks should use? I'm surprised that a demo makes use of an undocumented and I assume - unsupported - feature. Would you say it is a good idea to use this? My goal here is a drop down with small thumbnails in them.
The only reason that it's not exposed publicly is because exposing it would require adding an additional option. You can put any HTML you want in your object's label and it should work without overriding the render method. However, if you want to build customized HTML based on a more complex object, you will need to override the render method. That's one of the things this demo is showing; raw data is coming in and being turned into markup, as opposed to just using the data that comes in which is the default behavior.
We haven't figured out how to document methods that can't be called normally, i.e., $( elem ).autocomplete( "renderItem" ), but will be maintained as public methods. We do plan to support _renderItem as a public method and consider any backward-incompatible changes to it to be as serious as a backward-incompatible change to anything that is part of the normal public API.
It's really unfortunate that the autocomplete widget is so poorly documented. It would be helpful if there was an explanation in the example text for this custom rendering example that explains the use of the renderItem method. Likewise, there is no real explanation of the callback function (response) used in the JSONP example,and no documentation of the required properties value and label for ui.item. We are just supposed to figure out the 'magic' behind all this. I really like the new autocomplete widget, and agree with others that it is a major improvement over the other popular (very cool) autocomplete plugin , but I'm continually disappointed by the poor quality of documentation from the jQuery UI team.
Scott- I suggest you figure out quickly how to document methods that 'can't be called normally' (whatever that means), especially if you are going to use them in example code.
Hey there, I've been using this 'hack' to display HTML in my autocomplete box. I noticed a rather big problem with it however - it only works for the first autocomplete on the page. If you have a second autocomplete (with the same class tag for example) then the HTML will only be rendered on the first one. I've tried this using the demo posted above, so I'm certain that it's not my specific application that is causing the error.
It seems like the second text box isn't even running the code when I put a breakpoint on it with Firebug.