API tools faq
paste
Advertisement
trentjs

datalist filters table

trentjs
Nov 7th, 2020 (edited)
183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <style>
  5.             label{
  6.                 display:block;
  7.             }
  8.         </style>
  9.     </head>
  10. <body>
  11.  
  12.   <label for="filter-a-input">Cast of Star Wars:</label>
  13.   <input list="filter-a" name="filter-a-input" id="filter-a-input" class="filterDataList" data-filter=".tr-filter-a" data-display="table-row" data-source="filter-a">
  14.   <datalist id="filter-a" class="dataFilter">
  15.     <option value="Mark Hamill">
  16.     <option value="Harrison Ford">
  17.     <option value="Carrie Fisher">
  18.     <option value="Peter Cushing">
  19.     <option value="Alec Guinness">
  20.     <option value="Anthony Daniels">
  21.     <option value="Kenny Baker">
  22.     <option value="Peter Mayhew">
  23.     <option value="David Prowse">
  24.     <option value="Phil Brown">
  25.     <option value="R2-D2">
  26.     <option value="C3P0">
  27. </datalist>
  28.  
  29. <table>
  30.     <tr class="mark-hamill tr-filter-a"><td>Mark Hamill</td></tr>
  31.     <tr class="harrison-ford tr-filter-a"><td>Harrison Ford</td></tr>
  32.     <tr class="carrie-fisher tr-filter-a"><td>Carrie Fisher</td></tr>
  33.     <tr class="peter-cushing tr-filter-a"><td>Peter Cushing</td></tr>
  34.     <tr class="alec-guinness tr-filter-a"><td>Alec Guinness</td></tr>
  35.     <tr class="anthony-daniels tr-filter-a"><td>Anthony Daniels</td></tr>
  36.     <tr class="kenny-baker tr-filter-a"><td>Kenny Baker</td></tr>
  37.     <tr class="peter-mayhew tr-filter-a"><td>Peter Mayhew</td></tr>
  38.     <tr class="david-prowse tr-filter-a"><td>David Prowse</td></tr>
  39.     <tr class="phil-brown tr-filter-a"><td>Phil Brown</td></tr>
  40.     <tr class="r2-d2 tr-filter-a"><td>R2-D2</td></tr>
  41.     <tr class="c3p0 tr-filter-a"><td>C3P0</td></tr>
  42. </table>
  43.  
  44.  
  45. <script>
  46.  
  47. var filterClassList = [];
  48.  
  49.  
  50. var filterInputList = document.querySelectorAll(".filterDataList");
  51. for(var i = 0; i < filterInputList.length; i++) {
  52.     filterInputList[i].addEventListener('input', inputFilterChange);
  53. }
  54.  
  55. function inputFilterChange(event){
  56.     var thisId = event.target.id;
  57.     var thisValue = event.target.value;
  58.     var thisFilterClass = event.target.getAttribute('data-filter'); // tr-filter-a
  59.     var thisDisplayType = event.target.getAttribute('data-display'); // table-row
  60.     var thisDataArraySrc = event.target.getAttribute('data-source'); // filter-a
  61.     setFilterArray(thisDataArraySrc);
  62.     console.log(thisId + " : " + thisValue + " : " + thisFilterClass );
  63.     showFilterChange(thisValue, thisFilterClass, thisDisplayType );
  64. }
  65.  
  66. function setFilterArray(id){
  67.     filterClassList = [];
  68.     var dataNodesList = document.getElementById(id).childNodes;
  69.     console.log("setFilterArray:" + dataNodesList)
  70.     for (i = 0; i < dataNodesList.length; i++) {
  71.         var thisValue = dataNodesList[i].value;
  72.         var thisString = String(thisValue);
  73.         var thisFilter = thisString.toLowerCase().replace(/ /g,"-");
  74.         if(thisFilter != "undefined"){
  75.             filterClassList.push(thisFilter);
  76.         }
  77.        
  78.     } // end loop
  79. }
  80.  
  81. // showFilterChange(Mark, tr-filter-a, table-row)
  82. function showFilterChange(val, fltrclass, dsply){
  83.  
  84.     var filterTargetList = [];
  85.     var thisTargetValue = val.toLowerCase().replace(/ /g,"-");
  86.  
  87.     // MAKE ARRAY LIST OF CLASSES TO SHOW...
  88.     for (i = 0; i < filterClassList.length; i++) {
  89.         var thisSrc = filterClassList[i];
  90.         hasString = thisSrc.includes(thisTargetValue);
  91.         if(hasString == true){
  92.             filterTargetList.push(filterClassList[i])
  93.         }
  94.     } // end for
  95.  
  96.     // HIDE ALL CLASSES IN GROUP
  97.     if(filterTargetList.length > 0){
  98.         // HIDE CLASS GROUP
  99.         hideClassGroup = fltrclass; //.tr-filter-a
  100.         var hideList = document.querySelectorAll(hideClassGroup);
  101.         for(var i = 0; i < hideList.length; i++) {
  102.             hideList[i].style.display = "none";
  103.         }
  104.         // SHOW TARGET CLASS
  105.         // https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
  106.         for(var i = 0; i < filterTargetList.length; i++) {
  107.             showTarget = document.getElementsByClassName(filterTargetList[i]);
  108.             for (j = 0; j < showTarget.length; j++) {
  109.                 showTarget[j].style.display = dsply ;
  110.             }// end for j
  111.         } // end for i
  112.  
  113.     } // end if > 0
  114.  
  115. } // showFilterChange()
  116.  
  117.  
  118. </script>
  119.  
  120. </body>
  121. </html>
  122.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!