Фильтрация списка при помощи jQuery

Сегодня мы покажем вам маленький, но очень интересный и полезный урок, в которым вы научитесь фильтровать данные посредством jQuery и плавно менять отображение результатов поиска. Если у вас есть список чего-либо, например фильмов, то этот скрипт специально для вас!

Код

Следующий код предназначен для поиска элементов в списке, отслеживая события нажатия клавиш клавиатуры. При нахождении, он скрывает те элементы, которые не подходят.

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function filterList(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {

          $matches = $(list).find('a:Contains(' + filter + ')').parent();
          $('li', list).not($matches).slideUp();
          $matches.slideDown();

        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));

HTML

<div id="wrap">
<div class="product-head">
  <h1>Product Search</h1>
    <div id="form"></div>
    <div class="clear"></div>
</div>
  <ul id="list">
        <li><img src="/products/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li>
        <li><img src="/products/acorn_squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Acorn Squash</a></li>
        <li><img src="/products/broccoli.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">Broccoli</a></li>
        <li><img src="/products/carrot.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Carrot</a></li>
        <li><img src="/products/celery.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Celery</a></li>
        <li><img src="/products/lettuce.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Lettuce</a></li>
        <li><img src="/products/mushroom.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Mushroom</a></li>
        <li><img src="/products/onion.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Onion</a></li>
        <li><img src="/products/potato.png" width="30" height="30" align="absmiddle"/> <a href="#/Potato/">Potato</a></li>
        <li><img src="/products/pumpkin.png" width="30" height="30" align="absmiddle"/> <a href="#/Pumpkin/">Pumpkin</a></li>
        <li><img src="/products/radish.png" width="30" height="30" align="absmiddle"/> <a href="#/Radish/">Radish</a></li>
        <li><img src="/products/squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Squash</a></li>
        <li><img src="/products/strawberry.png" width="30" height="30" align="absmiddle"/> <a href="#/strawberry/">Strawberry</a></li>
        <li><img src="/products/sugar_snap.png" width="30" height="30" align="absmiddle"/> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
        <li><img src="/products/tomato.png" width="30" height="30" align="absmiddle"/> <a href="#/tomato/">Tomato</a></li>
    </ul>
</div>

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/JF-c8cDGdT8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Фильтрация списка при помощи jQuery | | 2012-06-19 12:09:33 | | Статьи Web-мастеру | | Сегодня мы покажем вам маленький, но очень интересный и полезный урок, в которым вы научитесь фильтровать данные посредством jQuery и плавно менять отображение результатов поиска. Если у вас есть | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: