CODEWITHSUNDEEP
javascriptjqueryhtml
Wemos
Wemos

Reputation: 61

javascript search based on dropdown menu

I have the code in following link , where there is a dropdown menu and a textbox . There is a javascript that show the table according chosen option from the dropdown . I am trying to add a search box so when a user pick from the dropdown, he could type in textbox and get the requested info . Any ideas where should i start and how to link my current javascript code ? Thanks !

https://fiddle.jshell.net/s5ftvgmx/3/

Upvotes: 1

Views: 1035

Answers (1)

Arsh Kalsi
Arsh Kalsi

Reputation: 179

I made a code for your search you can see live demo of code at https://fiddle.jshell.net/s5ftvgmx/14/ 

$(document).ready(function() {

function addRemoveClass(theRows) {

    theRows.removeClass("odd even");
    theRows.filter(":odd").addClass("odd");
    theRows.filter(":even").addClass("even");
}

 $(document).on('keyup','#myInput',function(){
 				var selected = $("#selectField").val();
        var search=$("#myInput").val();            
        search=search.toLowerCase();            
        $('tr[id!="HeadRow"]').hide();
        $('tr[id!="HeadRow"]').each(function(){            
            var obj=$(this);
            var productName=obj.first('td').html();
            productName=productName.toLowerCase();
            if(productName.search(search)>=0)
            {
                if(selected!= "All")
                {
                  if(obj.attr('position')==selected)
                  {
                  obj.show();
                  }
                }else{
                  obj.show();
                }
            }               
        });
    });

var rows = $("table#myTable tr:not(:first-child)");

addRemoveClass(rows);


$("#selectField").on("change", function() {

    var selected = this.value;

    if (selected != "All") {

        rows.filter("[position=" + selected + "]").show();
        rows.not("[position=" + selected + "]").hide();
        var visibleRows = rows.filter("[position=" + selected + "]");
        addRemoveClass(visibleRows);
    } else {

        rows.show();
        addRemoveClass(rows);

    }

});
});
<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>

 <title>Filter Table</title>


<body>
<div class="optionsDiv">
    Filter By Position
    <select id="selectField">
        <option value="All" selected>All</option>
        <option value="Student">Student</option>
        <option value="Assistant">Assistant</option>
        <option value="Professor">Professor</option>
     <br> <input type="text" id="myInput" placeholder="Search">

    </select>
   
</div>
<table id="myTable">
    <tr id="HeadRow">
        <td>First Name</td>
        <td>Last Name</td>
        <td>Age</td>
        <td>Position</td>
    </tr>

    <tr position="Student">
        <td>John</td>
        <td>John's Last name</td>
        <td>25</td>
        <td>Student</td>
    </tr>

    <tr position="Assistant">
        <td>Timmy</td>
        <td>Timmy's Last name</td>
        <td>22</td>
        <td>Assistant</td>
    </tr>

    <tr position="Professor">
        <td>Billy</td>
        <td>Billy's Last name</td>
        <td>40</td>
        <td>Professor</td>
    </tr>

    <tr position="Professor">
        <td>Eddy</td>
        <td>Eddy's Last name</td>
        <td>35</td>
        <td>Professor</td>
    </tr>

    <tr position="Professor">
        <td>Emma</td>
        <td>Emma's Last name</td>
        <td>38</td>
        <td>Professor</td>
    </tr>

    <tr position="Student">
        <td>Emily</td>
        <td>Emily's Last name</td>
        <td>20</td>
        <td>Student</td>
    </tr>

    <tr position="Assistant">
        <td>Jack</td>
        <td>Jack's Last name</td>
        <td>30</td>
        <td>Assistant</td>
    </tr>

    <tr position="Student">
        <td>Robert</td>
        <td>Robert's Last name</td>
        <td>20</td>
        <td>Student</td>
    </tr>

    <tr position="Assistant">
        <td>Danny</td>
        <td>Danny's Last name</td>
        <td>37</td>
        <td>Assistant</td>
    </tr>

    <tr position="Professor">
        <td>Erick</td>
        <td>Erick's Last name</td>
        <td>42</td>
        <td>Professor</td>
    </tr>
</table>

</body>

Upvotes: 1

Related Questions