Question : extending jQuery autocomplete plugin functionality

Hello to everybody!

I'm very new to jQuery and jQuery's plugin system. I have a project were I'm using the autocomplete plugin which is working fine so far. I do however need to extend the capabilities of this plugin. More precisely I need the autocomplete plugin to accomplish the following:

I have some server side code returning a JSON object with the following values:

DeviceID, DeviceName, DeviceCategory, DeviceGroup, DeviceClient etc. etc.

I would like the autocomplete plugin not only update the dropdown list while a value is being typed in but also update other DOM elements with the associated data, for example:

If DeviceID with the value 1 is selected / or the focus is still on the input field with the name typed in for DeviceID 1, I want all associated data for DeviceID 1 to be populated in several other DOM objects.

As I have mentioned, I'm very new to jQuery so I have a very hard time understanding the autocomplete jQuery code. Reading several posts online and chapters in the jQuery books, I have not been able to understand how jQuery's plugin system works. From what I understand so far, the answer seems to be hidden (to me) in jQuery's $.fn.extend() functionality, but I may be totally wrong.

I would greatly appreciate if I could get some pointers / hints as to how to understand / extend the autocomplete plugin and / or the whole extend(), .bind(), .trigger() functionality jQuery offers.

Thanks!

William

Answer : extending jQuery autocomplete plugin functionality

The first thing I think when I read your question is that you have a pretty good grasp of javascript but seem to think there is some sort of "plugin system" for jQuery.  Truth is, there is a very nice way to develop your own functions and extend jQuery (as you mention $.fn.), but after that it's the wild wild west.

I have two suggestions for you.  The first is to get the UN-minified version of whatever autocomplete plugin you have gotten your hands on and invest the hour or so it should take (provided it's properly commented/designed) to look at what it does.  There will almost certainly be sections that deal with "keyup()" and ".click()" that should be pretty clear as to their purpose.

Many plugins include a way to add your own callback handler during certain events (i.e. a value is selected).  I have been using this one lately - http://www.devbridge.com/projects/autocomplete/jquery/.  It has an onSelect() method that you can assign a function to.  From there, you can manipulate the rest of your DOM depending on the value the user selects.