Using Jquery to Create a search for A series of LI's with more detail in the "alt attribute"

Question

So here is the scenario. I have a series of about 60 hidden li's that contain important information about each link. When a user hover overs the link the alt info displays in a special information area.

          <li style="list-style-type: none; "><a href="a" alt="This offers details on cars, monkeys trees, horses and how to do your taxes" class="report">Data Link 1</a></li>

This works perfectly fine, but I want to try and make this function even better, by providing a way for the user to search in a search box (or even auto complete) and have it bring back a list of data links that match the criteria.

Thoughts on how to go about this? Listed below is my existing code.

$(function(){

                            // Tabs
            $('#tabs').tabs();


$('#leftnav li a').hover(
    //hoverIn function
    function() {
        $('#reportDetail').html($(this).attr('alt')).fadeIn('slow')
    },
    //hoverOut function    
    function(){
        $('#reportDetail').hide();            
    }
);

Answer 1

I'd try a different approach. Just have a bunch of divs with display:none at the end of the page, and have a correlation between the element in question and its "info div". Say your links were within visible lis, do something similar to:

<li><a id="myLink_1" class="enableLinkHover" href="/foo">My First Link</a></li>

and then, at the end of the body:

<div id="myInfoDiv_1" class="hiddenInfoDiv">Here's the text for the first link.</div>

You'll need to bind the $.hover() event for the links like so:

// If you have jQuery >= 1.4.1, use the following line, otherwise change
// 'mouseover mouseout' to 'hover'
$('.enableLinkHover').live('mouseover mouseout',
    function(e) {
        var id = $(this).attr('id').replace('myLink_', '');
        var $infoDiv = $('#myInfoDiv_' + id);
        // do the rest of your display logic here
    },
    function(e) {
        // remove the info box
    }
);

That way, you can easily choose which links have additional info, and have a common non-nested format for displaying that info.

If you want to keep the info next to the link, that's fine - it doesn't really matter where the myInfoDiv_# elements are (or whatever you name them), so long as they're not visible.

Answer 2

Here is a quick example of filtering the lists based on the text entered in an input box.

$(function() {
$("#searchTerm").keyup(function() {
    $("a.report").stop().animate({opacity: 1});
    $("a.report:not(:[alt*=" + $(this).val()+"])").stop().animate({opacity: 0.1 });

});});​

It is using the attribute contains selector to find any anchor which contains the text entered in the #searchTerm input box in its alt attribute