javascript поиск на основе выпадающего меню

У меня есть код в следующей ссылке, где есть выпадающее меню и текстовое поле. В раскрывающемся списке есть javascript, показывающий таблицу по выбранной опции. Я пытаюсь добавить окно поиска, поэтому, когда пользователь выбирает из раскрывающегося списка, он может вводить текстовое поле и получать запрошенную информацию. Любые идеи, с которых я должен начать, и как связать мой текущий код javascript? Спасибо!javascript поиск на основе выпадающего меню

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

источник

2017-01-23 Elias E

Я сделал код для поиска вы можете увидеть демо кода в 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>

источник

2017-01-23 07:10:09

javascript поиск на основе выпадающего меню

ответ

Смежные вопросы