Select Option not working along with Search Filter

Question

I'm to trying to get search filter and with category wise filter, My probelem is when i use search filter and select option alone it's working when i try to get these both together with one search button it's not working.

Here is some of my code, actual code is too big so i have shared some important here and i do have jsfiddle link below which is having whole code.

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

The search is implemented in the getData function, so you should update it to take into account categories and pagination. Following is the code that checks the search phrase AND the categories.

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

And the updated fiddle: https://jsfiddle.net/tmLg1y0q/9/