jQuery 同位素搜索过滤器

Question

我使用以下代码片段来促进对我的同位素实现的实时搜索。

它工作得很好，但我想知道是否有办法限制它搜索的范围。

我们的同位素返回HTML，如下所示:

<div class="item">
<span class="title"></span>
<span calss="description"></span>

现在它搜索所有内容，我如何限制它只过滤“标题”字段的结果？

jQuery(document).ready(function($) {
    $(document).ready(function(){

        var $container = $('#portfolio'),

        // create a clone that will be used for measuring container width
        $containerProxy = $container.clone().empty().css({ visibility: 'hidden' });   

        $container.after( $containerProxy );  

        // get the first item to use for measuring columnWidth
        var $item = $container.find('.portfolio-item').eq(0);
        $container.imagesLoaded(function(){
            $(window).smartresize( function() {

                // calculate columnWidth
                var colWidth = Math.floor( $containerProxy.width() / 5 ); // Change this number to your desired amount of columns

                // set width of container based on columnWidth
                $container.css({
                    width: colWidth * 5 // Change this number to your desired amount of columns
                })
                .isotope({

                    // disable automatic resizing when window is resized
                    resizable: false,

                    // set columnWidth option for masonry
                    masonry: {
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer'
                    }
                });

            // trigger smartresize for first time
            }).smartresize();
        });



        $( function() {
        // quick search regex
            var qsRegex;

            // init Isotope
            var $grid = $('#portfolio').isotope({
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows',
                filter: function() {
                    return qsRegex ? $(this).text().match( qsRegex ) : true;
                }
            });

            // use value of search field to filter
            var $quicksearch = $('.quicksearch').keyup( debounce( function() {
                qsRegex = new RegExp( $quicksearch.val(), 'gi' );
                $grid.isotope();
            }, 200 ) );


            // bind filter on select change
            $('#filter-select').on( 'change', function() {
                // get filter value from option value
                var filterValue = this.value;

                $grid.isotope({ filter: filterValue });
            });

        });



        // debounce so filtering doesn't happen every millisecond
        function debounce( fn, threshold ) {
            var timeout;
            return function debounced() {
                if ( timeout ) {
                    clearTimeout( timeout );
                }
                function delayed() {
                    fn();
                    timeout = null;
                }
                timeout = setTimeout( delayed, threshold || 100 );
            }
        }


        // filter items when filter link is clicked
        $('#filters a').click(function(){
            $('#filters a.active').removeClass('active');
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector, animationEngine : "css" });
            $(this).addClass('active');
            return false;

        });

    });

});

Answer 1

我相信这就是您希望在 init 中仅与标题匹配的内容:

return qsRegex ? $(this).find('.title').text().match( qsRegex ) : true;

即在当前节点内找到 .title，获取其 text()，然后针对该节点运行正则表达式。

对于有关处理多个过滤器的后续问题:当前您正在为每个 UI 小部件运行单独的 $grid.isotope({ filter: ...}) 函数，并使用不同的过滤器，这会覆盖任何先前选择的过滤器设置。

避免该问题的一种方法是编写一个过滤器函数来检查所有条件。下面是一个工作示例；有趣的部分被评论了。

$(function() {

    var $grid = $('#container');
    $grid.isotope({itemSelector: '.item'});

    var filters = []; // A convenient bucket for all the filter options, 
                      // just so we don't have to look them up in the DOM every time.
                      // (a global array is maybe sort of not the most elegant 
                      // way you could deal with this but you get the idea.)
    
    // Search event handlers
    $('.quicksearch').on('keyup', function() {
        // debounce removed for brevity, but you'd put it here
        filters[0] = this.value;
        runFilter();
    });
    $('#filter-select').on('change', function() {
        filters[1] = this.value;
        runFilter();
    });
    // and so on if more filters needed

    // The filter itself
    var runFilter = function() {
        $grid.isotope({
            filter: function() {
                if (filters[0]) {
                    // at least some search text was entered:
                    var qsRegex = new RegExp(filters[0], 'gi');

                    // if the title doesn't match, eliminate it:
                    if (!$(this).find('.title').text().match(qsRegex)) {
                        return false;
                    }
                }

                if (filters[1]) {
                    // a category was selected; filter out others:
                    if (!($(this).hasClass(filters[1]))) {
                        return false;
                    }
                }

                // etcetera, for any other filters 

                // successfully passed all conditions, so:
                return true;
            }
        });
    }
});

.item {
  width: 120px;
  height: 70px;
  margin: 3px; padding: 3px;
  display: inline-block;
}

.red {background: red;}
.blue {background: blue;}
.green {background: green;}
.yellow {background: yellow;}
/* isotope css (animations etc) omitted */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div id="filters">
    Color: <select id="filter-select">
        <option value="">All</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select><br>
    Title: <input type="text" class="quicksearch">
</div>

<div id="container">
    <div class="red item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div>
    <div class="green item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div>
    <div class="blue item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div>
    <div class="yellow item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div>
    <div class="red item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div>
    <div class="green item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div>
    <div class="blue item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div>
    <div class="yellow item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div>
    <div class="red item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div>
    <div class="green item"><div class="title">Title aaa</div><div class="description">Description xxx</div></div>
    <div class="blue item"><div class="title">Title bbb</div><div class="description">Description yyy</div></div>
    <div class="yellow item"><div class="title">Title ccc</div><div class="description">Description zzz</div></div>
</div>