根据用户选择的选项过滤结果

Question

使用搜索和过滤器组合过滤常见问题。我必须将搜索与下拉选择结合起来

如果我搜索某个词而不是选择下拉值，那么结果应该是搜索值和下拉值的组合选择

下拉值是FQA手风琴的data-key值

<div class="panel panel-success"  data-key="old">

 $("#job-type").change(function() {
        var filterValue = $(this).val();
 });

https://codepen.io/er-pankaj-kashyap/pen/MWJWRmO

HTML

$(document).ready(function() {

  (function($) {
    
    var $form = $('#filter-form');
    var $helpBlock = $("#filter-help-block");
    
    //Watch for user typing to refresh the filter
    $('#filter').keyup(function() {
      var filter = $(this).val();
      $form.removeClass("has-success has-error");
      
      if (filter == "") {
        $helpBlock.text("No filter applied.")
        $('.searchable .panel').show();
      } else {
        //Close any open panels
        $('.collapse.in').removeClass('in');
        
        //Hide questions, will show result later
        $('.searchable .panel').hide();

        var regex = new RegExp(filter, 'i');

        var filterResult = $('.searchable .panel').filter(function() {
          return regex.test($(this).text());
        })

        if (filterResult) {
          if (filterResult.length != 0) {
            $form.addClass("has-success");
            $helpBlock.text(filterResult.length + " question(s) found.");
            filterResult.show();
          } else {
            $form.addClass("has-error").removeClass("has-success");
            $helpBlock.text("No questions found.");
          }

        } else {
          $form.addClass("has-error").removeClass("has-success");
          $helpBlock.text("No questions found.");
        }
      }
    })

  }($));
});

//
//  This function disables the enter button
//  because we're using a form element to filter, if a user
//  pressed enter, it would 'submit' a form and reload the page
//  Probably not needed here on Codepen, but necessary elsewhere
// 
$('.noEnterSubmit').keypress(function(e) {
  if (e.which == 13) e.preventDefault();
});

$("#job-type").change(function() {
            var filterValue = $(this).val();


});

body {  
  font-family: Futura; 
  background-color:#ddd;
}

.container {
  max-width: 400px;
}

h1 {
  text-align:center;
  font-size:22px;
}

.form-group {
  width:230px;
  margin:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <h1>Filterable FAQ with JQuery and Boostrap</h1>

        <!-- Filter Form -->
        <div class="form-group" id="filter-form">
        <label for="filter">
        Search for a Question
        </label>
        <input id="filter" type="text" class="form-control noEnterSubmit" placeholder="Enter a keyword or phrase" />
        <small>
        <span id="filter-help-block" class="help-block">
        <select name="" id="job-type">
        <option value="">Job Type</option>
        <option value="new">new</option>
        <option value="old">old</option>
        </select>
        </span>
        </small>
        </div>

        <!-- Bootstrap collapsible panels -->
        <div class="panel-group searchable" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-primary" data-key="new">
        <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Are you my mummy?
        </a>
        </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
        </div>
        </div>
        <div class="panel panel-success"  data-key="old">
        <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Hey! Who turned out the lights!?
        </a>
        </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
        </div>
        </div>
        <div class="panel panel-danger"  data-key="new">
        <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Donna Noble has left the library, but has Donna Noble been saved?
        </a>
        </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
        </div>
        </div>
        <div class="panel panel-warning"  data-key="old" >
        <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
        Allons-y?
        </a>
        </h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
        Pug narwhal selfies XOXO. Semiotics kale chips man braid before they sold out, church-key pork belly pickled raw denim fanny pack PBR&B squid. Normcore lomo organic 90's pop-up. Pop-up cliche thundercats austin small batch. Ugh offal synth, lo-fi lumbersexual
        paleo crucifix try-hard fashion axe. Pork belly pitchfork kombucha wayfarers hammock, austin bushwick kale chips cray chambray 8-bit pug cronut poutine tilde. Put a bird on it pork belly mixtape tacos normcore four loko.
        </div>
        </div>
        </div>
        </div>
        </div>

Answer 1

试试这个。

我将 </span> 移到下拉列表之前并将搜索移到函数之外

你可以移动

const jobType = $('#job-type').val(); 到 if (filter == "") {

之前

如果你想在没有过滤器的情况下显示新的/旧的

let $form, $helpBlock;

const search = function() {
  const filter = $("#filter").val();

  $form.removeClass("has-success has-error");

  if (filter == "") {
    $helpBlock.text("No filter applied.")
    $('.searchable .panel').show();
    return;
  }
  //Close any open panels
  $('.collapse.in').removeClass('in');

  //Hide questions, will show result later
  $('.searchable .panel').hide();

  const jobType = $('#job-type').val();
  var regex = new RegExp(filter, 'i');

  const filterResult = $(`.searchable .panel${jobType?`[data-key=${jobType}]`:''}`).filter(function() {
    return regex.test($(this).text());
  })

  if (filterResult) {
    if (filterResult.length != 0) {
      $form.addClass("has-success");
      $helpBlock.text(filterResult.length + " question(s) found.");
      filterResult.show();
    } else {
      $form.addClass("has-error").removeClass("has-success");
      $helpBlock.text("No questions found.");
    }

  } else {
    $form.addClass("has-error").removeClass("has-success");
    $helpBlock.text("No questions found.");
  }

};

$(function() {

  $form = $('#filter-form');
  $helpBlock = $("#filter-help-block");

  //Watch for user typing to refresh the filter
  $('#filter').on('input', search)
  $('#job-type').on('change', search)

  $('.noEnterSubmit').keypress(function(e) {
    if (e.which == 13) e.preventDefault();
  });


});

body {
  font-family: Futura;
  background-color: #ddd;
}

.container {
  max-width: 400px;
}

h1 {
  text-align: center;
  font-size: 22px;
}

.form-group {
  width: 230px;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <h1>Filterable FAQ with JQuery and Boostrap</h1>

  <!-- Filter Form -->
  <div class="form-group" id="filter-form">
    <label for="filter">
        Search for a Question
        </label>
    <input id="filter" type="text" class="form-control noEnterSubmit" placeholder="Enter a keyword or phrase" />
    <br/><small>
        <span id="filter-help-block" class="help-block"></span><br/>
        <select name="" id="job-type">
        <option value="">Job Type</option>
        <option value="new">new</option>
        <option value="old">old</option>
        </select>
        
        </small>
  </div>

  <!-- Bootstrap collapsible panels -->
  <div class="panel-group searchable" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-primary" data-key="new">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Are you my mummy?
        </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-success" data-key="old">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Hey! Who turned out the lights!?
        </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-danger" data-key="new">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Donna Noble has left the library, but has Donna Noble been saved?
        </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-warning" data-key="old">
      <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title">
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
        Allons-y?
        </a>
        </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          Pug narwhal selfies XOXO. Semiotics kale chips man braid before they sold out, church-key pork belly pickled raw denim fanny pack PBR&B squid. Normcore lomo organic 90's pop-up. Pop-up cliche thundercats austin small batch. Ugh offal synth, lo-fi lumbersexual
          paleo crucifix try-hard fashion axe. Pork belly pitchfork kombucha wayfarers hammock, austin bushwick kale chips cray chambray 8-bit pug cronut poutine tilde. Put a bird on it pork belly mixtape tacos normcore four loko.
        </div>
      </div>
    </div>
  </div>
</div>