Question

我要尝试使用搜索过滤器和类别过滤器，我的问题是当我使用搜索过滤器并单独选择选项时，当我尝试将它们与一个搜索按钮结合在一起时，它不起作用。

>

这是我的一些代码，实际代码太大了，所以我在这里分享了一些重要的东西，我在下面有 jsfiddle 链接，里面有完整的代码。

Jsfiddle：https://jsfiddle.net/JOHN_748/8dpg3y51/2/

$(function() {

        //Search Filter (search form)
        var flexiblePagination = $('#content').flexiblePagination({
            itemsPerPage : 4,
            displayedPages: 4,
            itemSelector : 'div.result:visible',
            pagingControlsContainer : '#pagingControls',
            showingInfoSelector : '#showingInfo',
            css: {
                btnNumberingClass: 'btn btn-sm btn-success',
                btnFirstClass: 'btn btn-sm btn-success',
                btnLastClass: 'btn btn-sm btn-success',
                btnNextClass: 'btn btn-sm btn-success',
                btnPreviousClass: 'btn btn-sm btn-success'
            },
            searchBox: {
                onClick: true,  
                onClickSelector: '#search'
            }
        });
        flexiblePagination.getController().onPageClick = function(pageNum, e){
            console.log('You Clicked Page: '+pageNum)
        };

    });
    // Search Category Wise  (select form)
    $(function() {

      const $sels = $("select");
      const $boxes = $(".box");
      $("#search").on("click", function() {
        const vals = $sels.map(function() { return this.value }).get()
        $boxes.each(function() { 
          const show = $(this).hasClass(vals[0]) && $(this).hasClass(vals[1]) && $(this).hasClass(vals[2]);
          $(this).toggle(show) 
        });
      }).click();
    });

.details{
    min-height: 20px;
    padding: 19px;
    margin-top: 20px;
    background-color: #ecf0f1;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

#pagingControls{
  margin-top: 20px;
  text-align: center;
}

#showingInfo{
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

<div class="row mt-4">
        <div class="col-9">
            <input class="searchBox form-control" placeholder="Search Something...">          
        </div>
        <div class="col-3">
            <button id="search" class="btn btn-primary w-100">Search</button>        
        </div>
    </div>
    <div class="row mt-3">
      <div class="col-3">
        <select class="form-control">
          <option value="all">Quality</option>
          <option value="720">720p</option>
          <option value="1080">1080p</option>
          <option value="2160">2160p</option>
        </select>
      </div>
      <div class="col-3">
        <select class="form-control">
          <option value="all">Genre</option>
          <option value="action">Action</option>
          <option value="thriller">Thriller</option>
          <option value="drama">Drama</option>
        </select>
      </div>
      <div class="col-3">
        <select class="form-control">
          <option value="all">Rating</option>
          <option value="9">9</option>
          <option value="8">8</option>
          <option value="7">7</option>
          <option value="6">7</option>
        </select>
      </div>
      <div class="col-3">
        <select class="form-control">
          <option value="all">OrderBy</option>
          <option value="dateasc">Date Asc</option>
          <option value="datedesc">Date Desc</option>
          <option value="highrate">Highest Rating</option>
        </select>
      </div>
    </div>
    
    
    <div class="container">
  
  <div id="content" class="row">

    <div class="result box 1080 thriller 9 datedesc col-6">
      <div class="details">
        <p>Movie : Avatar</p>
        <p>Actor : Jake Sully</p>
        <p>Rating : 9</p>
        <p>Info : Avatar is a 2009 science fiction film directed, written, produced, and co-edited by James Cameron.</p>
      </div>
    </div>

    
    <div class="result box 720 action 9 dateasc col-6">
      <div class="details">
        <p>Movie : TENET</p>
        <p>Actor : John David</p>
        <p>Rating : 9</p>
        <p>Info : Directed by Christopher Nolan. With Juhan Ulfsak, Jefferson Hall, Ivo Uukkivi, Andrew Howard.</p>
      </div>
    </div>

</div>

</div>

<div id="pagingControls"></div>
<div id="showingInfo"></div>

Answer 1

搜索是在 getData 函数中实现的，因此您应该更新它以考虑类别和分页。以下是检查搜索词组和类别的代码。

this.getData = function(){
    var words = pager.searchPhrase.toLowerCase().split(" "), dataSource = pager.itemSelector;
    if (pager.dataSource.length > 0){
        /**@Advanced Implementation Using a Custom Json Data Source */
        dataSource = pager.dataSource;
    }
    const $sels = $("select");
    const vals = $sels.map(function() { return this.value }).get()
    const quality = vals[0] == 'all' ? false : vals[0];
    const genre = vals[1] == 'all' ? false : vals[1];
    const rating = vals[2] == 'all' ? false : vals[2];

    if (pager.searchPhrase.length > 0 || quality || genre || rating ) {
        /**@Filter By Search Phrase AND/OR categories */
        return dataSource.filter(function(key, value){
            const selMatch = (!genre || $(this).hasClass(genre)) &&
              (!quality || $(value).hasClass(quality)) &&
              (!rating || $(value).hasClass(rating));
            return selMatch && (
                pager.searchPhrase.length > 0 ? pager.search($(value).html().replace(/<[^>]+>/g,"").toLowerCase(), words) : true
            );
        });
    }
    /**@NoFilter */
    return dataSource;
};

以及更新的小提琴：https://jsfiddle.net/tmLg1y0q/9/

选择选项不能与搜索过滤器一起使用

1 个答案: