Javascript Suche basierend auf Dropdown-Menü

Ich habe den Code in folgenden Link, wo gibt es ein Dropdown-Menü und ein Textfeld. Es gibt ein Javascript, das die Tabelle entsprechend der ausgewählten Option im Dropdown-Menü anzeigt. Ich versuche, ein Suchfeld hinzuzufügen, damit ein Benutzer, wenn er aus der Dropdownliste auswählt, ein Textfeld eingeben und die angeforderten Informationen abrufen kann. Irgendwelche Ideen, wo soll ich anfangen und wie ich meinen gegenwärtigen Javascript-Code verbinde? Danke!Javascript Suche basierend auf Dropdown-Menü

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

Quelle

2017-01-23 Elias E

ich einen Code für Ihre Suche hat Sie Live-Demo von Code bei 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(){ 
 
    \t \t \t \t 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 
 
\t \t \t src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
\t \t \t integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
\t \t \t 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>

sehen

Quelle

2017-01-23 07:10:09

Javascript Suche basierend auf Dropdown-Menü

Antwort

Verwandte Themen