I was recently revamping some user-embedable widgets for BioPortal. In addition to formatting the results in the autocomplete, we decided to include a tag at the bottom with a link to the BioPortal site indicating where results were coming from.
It wasn't immediately obvious how to insert data into the ac_results div. Using Javascript to programmatically place the required HTML was the first option I explored, but the autocomplete plugin won't work if information is placed into the div prior to the results being inserted there.
As a second option, I tried overriding the formatItem function to insert an additional row of data containing the information. This worked, but the additional data was treated like a result entry, meaning that you could select it with the mouse or keyboard out of the list. I wanted the text to act and appear distinctly different that the results.
Finally I resorted to modifying the jQuery autocomplete plugin to appropriately handle additional HTML passed as a string using a new 'footer' option. In the showResults function I added a line to check for the footer option and append the data provided if found.
Then, when creating the autocomplete, you can add the footer information like this:
The resulting output is shown above. Suggestions welcome!