Использование Jquery для создания поиска серии LI с более подробной информацией в «атрибуте alt»

Question

Итак, вот сценарий. У меня есть серия из примерно 60 скрытых ликов, которые содержат важную информацию о каждой ссылке. Когда пользователь наводит курсор на ссылку, альтернативная информация отображается в специальной информационной области.

          <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>

Это прекрасно работает, но я хочу попытаться сделать эту функцию еще лучше, предоставив пользователю возможность поиска в окне поиска (или даже автозаполнения) и вернуть список ссылок данных, соответствуют критериям.

Мысли о том, как это сделать? Ниже приведен мой существующий код.

$(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

Здесь - быстрый пример фильтрации списков по тексту, введенному в поле ввода.

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

});});​

Используется атрибут , содержит селектор найти любой якорь, который содержит текст, введенный в поле ввода #searchTerm в его атрибуте alt

Answer 2

Я бы попробовал другой подход.Просто имейте набор div с display:none в конце страницы, и имейте корреляцию между рассматриваемым элементом и его "info div".Скажем, ваши ссылки были в пределах видимых li с, сделайте что-то похожее на:

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

и затем, в конце body:

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

Вам понадобитсячтобы связать событие $.hover() для ссылок следующим образом:

// 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
    }
);

Таким образом, вы можете легко выбрать, какие ссылки имеют дополнительную информацию и имеют общий не вложенный формат для отображения этой информации.

Если вы хотите сохранить информацию рядом со ссылкой, это нормально - не имеет значения, где находятся элементы myInfoDiv_# (или как вы их называете), если они не видны.