Awesomely clever jquery required - ajax code highlighting

Awesomely clever jquery required - ajax code highlighting

Ok,

I'm trying to build a complicated list that highlights dependencies and I'm sure this'll potentially be a great showing off of jquery's general coolness.

The task:
I have a big page with two lists of items, components and dependencies, eg:


<div id="components">
<div><a href="computera.htm">Computer A</a></div>
<div><a href="computerb.htm">Computer B</a></div>
<div><a href="computerc.htm">Computer C</a></div>
</div>

<div id="dependencies">
<div><a href="Electricity.htm">Electricity</a></div>
<div><a href="diskdrive.htm">Disk drive</a></div>
<div><a href="windows.htm">Windows</a></div>
</div>


Now each of the sub pages being linked to in the above divs has a predictable structure like this:

<div id="component">
<h1>Computer A</h1>
<p>
Computer a is used for this...
</p>
<h3>Dependencies</h3>
<ul id="dependencies">
<li>Electricity</li>
<li>Windows</li>
</ul>
</div>


So far I've blown all the jquery sceptics away by ajaxing the contents of these pages and showing them in a tooltip when you hover over them.

To complete the conversion, I'd love to be able to automatically highlight the dependencies on the top page.

ie so if you hover over the divs within the id 'components' it'll:

1) grab the current text in the div being hovered over
2) ajax request the list items from the dependencies id of the linked page
3) use these to highlight the matching terms in the dependencies id of the current page

I've found the jtip plugin which does a brilliant job of ajaxing the page contents http://www.codylindley.com/blogstuff/js/jtip/

and I'm using the highlighter plugin: http://johannburkard.de/blog/programmin ... lugin.html

But I'm struggling to get my head round how I can dynamically feed the highlighter the variables to highlight?

Any jquery gurus out there...?