mardi 1 août 2017

How do I filter a string object based on the partial string matches in JavaScript?

I have a string object with values:

dictionary={ 
 1: ["a1+b+c"],
 2: ["a1+c+v"], 
 3: ["a1+z+e"], 
 4: ["a2+p+a"], 
 5: ["a2+z+v"], 
 6: ["a3+q+v"], 
 ...}; 

I have a page with checkboxes for each partial string value in an object, e.g. checkboxes "a","b","c",... etc. On the page, the checkboxes are located in groups a1, a2, a3, etc.

      <p><div id="displayString">
      </div></p>


<table>
         <table class="table table-striped">
          <thead>
            <tr>
              <th>a1</th>
              <th>a2</th>
              <th>a3</th> 
              <th>a4</th>
              <th>a5</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><label><input type="checkbox" name="selected" value="a" class="a1" />a</label></td>
              <td><label><input type="checkbox" name="selected" value="a" class="a2" />a</label></td>
              <td><label><input type="checkbox" name="selected" value="a" class="a3" />a</label></td>
              <td><label><input type="checkbox" name="selected" value="a" class="a4" />a</label></td>
             <td><label><input type="checkbox" name="selected" value="a" class="a5" />a</label></td>
              </tr>
            <tr>
              <td><label><input type="checkbox" name="selected" value="b" class="a1" />b</label></td>
              <td><label><input type="checkbox" name="selected" value="b" class="a2" />b</label></td>
              <td><label><input type="checkbox" name="selected" value="b" class="a3" />b</label></td>
              <td><label><input type="checkbox" name="selected" value="b" class="a4" />b</label></td>
             <td><label><input type="checkbox" name="selected" value="b" class="a5" />b</label></td>
              </tr>
      ...

I need to filter the dictionary by the partial values based on the values of the selected checkboxes, for example, when selecting "c" in group a1, it would return:

 1: a1+b+c
 2: a1+c+v

When selecting "z" from group a2, it would return:

 5: "a2+z+v"

The code I have (a function for each group) is:

$(function(){
$(".a1").on("click", function(){
  var arr = $(".a1:checked").map(function(){
      return $(this).val();
    }).get();
  $('#displayString').html(arr);  
})
})

This code only shows the values selected. What is a way to create a partial lookup and list all matches one under the other?




Aucun commentaire:

Enregistrer un commentaire