how multiple condition filter can work using Jquery?-CodePudding

How can I make multiple filtering condition work simultaneously? Currently I'm able to filter using individual conditions. But while giving multiple condition it is only filtering based on the last filter condition.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>



      <div >
                            <h6>Name</h6>
                            <input id="Name" type="text"  placeholder="Name" />
                        </div>
                          <div >
                            <h6>Title</h6>
                            <input id="Title" type="text"  placeholder=" Title" />
                        </div>
                        <div >
                            <h6>City</h6>
                            <select id="City"  style="width: 100%;">
                                <option selected="selected">Select a City</option>
                                <option>A</option>
                                <option>B</option>
                                <a href="Scripts/">Scripts/</a>
                            </select>
                        </div>



     
     $(document).ready(function () {
        $("#Name").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#tranmittalsTable tr").filter(function () {
                $(this).toggle($(this).find("td:eq(1)").text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    $(document).ready(function () {
        $("#Title").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#tranmittalsTable tr").filter(function () {
                $(this).toggle($(this).find("td:eq(2)").text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    $(document).ready(function () {
        $("#City").on("change", function () {
            var value = $(this).val().toLowerCase();
            $("#tranmittalsTable tr").filter(function () {
                $(this).toggle($(this).find("td:eq(3)").text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

CodePudding user response：

This is a functional example of what you want to achieve:

     var selectedName ='';
     var selectedTitle ='';
     var selectedCity ='';
     
   
    var myFilter = function () {
       $("#tranmittalsTable tr").filter(function () {        
          $(this).toggle($(this).find("td:eq(1)").text().toLowerCase().indexOf(selectedName) > -1 &&
          $(this).find("td:eq(2)").text().toLowerCase().indexOf(selectedTitle) > -1 &&
          $(this).find("td:eq(3)").text().toLowerCase().indexOf(selectedCity) > -1)            
        });                          
     };
    
        $("#Name").on("keyup", function () {
            selectedName = $(this).val().toLowerCase();            
            myFilter();
        });    
    
        $("#Title").on("keyup", function () {
           selectedTitle = $(this).val().toLowerCase();
           myFilter();
        });

        $("#City").on("change", function () {
           selectedCity = $(this).val().toLowerCase(); 
           if (selectedCity == 'select a city')
             selectedCity ='';
           myFilter();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
                            <h6>Name</h6>
                            <input id="Name" type="text"  placeholder="Name" />
                        </div>
                          <div >
                            <h6>Title</h6>
                            <input id="Title" type="text"  placeholder=" Title" />
                        </div>
                        <div >
                            <h6>City</h6>
                            <select id="City"  style="width: 100%;">
                                <option selected="selected">Select a City</option>
                                <option>A</option>
                                <option>B</option>
                                <a href="Scripts/">Scripts/</a>
                            </select>
                        </div>
 <br/>
 
 <table id="tranmittalsTable">
  <tr>
    <td>1</td>
    <td>John</td>
    <td>T1</td>
    <td>A</td>
  </tr>
    <tr>
    <td>2</td>
    <td>Tom</td>
    <td>T1</td>
    <td>A</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Pom</td>
    <td>T2</td>
    <td>A</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Lina</td>
    <td>T3</td>
    <td>A</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Corina</td>
    <td>T5</td>
    <td>B</td>
  </tr>

 </table>

CodePudding user response：

In JQuery filtering we can use the AND and OR operations as given below.

AND operation

a=$('[myc="blue"][myid="1"][myid="3"]');

OR operation, use commas

a=$('[myc="blue"],[myid="1"],[myid="3"]');

In your case, if you want to use OR then check below code.

$(document).ready(function () {
    $("#City").on("change", function () {
        var value = $(this).val().toLowerCase();
        $("#tranmittalsTable tr").filter(function () {
            $(this).toggle($(this).find("[td:eq(3)], 
[td:eq(2)]").text().toLowerCase().indexOf(value) > -1)
        });
    });
});

In your case, if you want to use AND then check below code.

$(document).ready(function () {
    $("#City").on("change", function () {
        var value = $(this).val().toLowerCase();
        $("#tranmittalsTable tr").filter(function () {
            $(this).toggle($(this).find("[td:eq(3)]
[td:eq(2)]").text().toLowerCase().indexOf(value) > -1)
        });
    });
});