使3個搜索輸入字段一起工作

Question

我有3個搜索輸入，一個用於SN，一個用於TITLE，另一個用於DATE和I，以使它們在完美和諧中一起工作。

Buuuuut，是不是這樣的現在..單獨他們的工作相當不錯，但同時在SN輸入按揭示艾倫和喜悅的行，在名稱輸入按壓Ø是足以抵消第一濾波器和只會顯示喜悅，因爲她是在SN ，並在名稱中Ø只有一個，它蘇格蘭人太...這不勝枚舉。

我該如何解決這個問題？

jsfiddle

胖乎乎的JS

$(document).ready(function() { 
    $('#sn').keyup(function() { 
    var searchTerm = $(this).val().replace(/ /g, '').toLowerCase(); 
    $(".sn").each(function() { 
     if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm)) { 
     $(this).parent().show(); 
     } else { 
     $(this).parent().hide(); 
     } 
    }); 
    }); 
    $('#title').keyup(function() { 
    var searchTerm2 = $(this).val().replace(/ /g, '').toLowerCase(); 
    $(".title").each(function() { 
     if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm2)) { 
     $(this).parent().show(); 
     } else { 
     $(this).parent().hide(); 
     } 
    }); 
    }); 
    $('#date').keyup(function() { 
    var searchTerm3 = $(this).val().replace(/ /g, '').toLowerCase(); 
    $(".date").each(function() { 
     if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm3)) { 
     $(this).parent().show(); 
     } else { 
     $(this).parent().hide(); 
     } 
    }); 
    }); 
}); 

Answer 1

因此，您需要根據您的所有過濾輸入，你只濾波基於在當前正在輸入的過濾功能，你行。

我做了一個過濾器功能，它檢查所有可能的過濾器和過濾器行。 檢查註釋以及if語句的解釋是否合理。

PS。你的小提琴中Joy的那一行HTML也搞砸了。 （有沒有SN列，歡樂沒有class屬性）

\t $(document).ready(function() { 
 
\t $('#sn').keyup(function() { 
 
\t  filter(); 
 
\t }); 
 
\t $('#title').keyup(function() { 
 
\t  filter(); 
 
\t }); 
 
\t $('#date').keyup(function() { 
 
\t  filter(); 
 
\t }); 
 
    
 
    function filter() { 
 
    \t var sn = $("#sn").val().replace(/ /g, '').toLowerCase(); 
 
    \t var title = $("#title").val().replace(/ /g, '').toLowerCase(); 
 
    \t var date = $("#date").val().replace(/ /g, '').toLowerCase(); 
 
    
 
    \t $("tr.fill").each(function() { 
 
     \t var showRow = true; 
 
     // if there is a value for filtering sn AND this row's does NOT have a match, hide row 
 
     if (sn && !($(this).find('.sn').text().replace(/ /g, '').toLowerCase().match(sn))) { 
 
     \t showRow = false; 
 
     } 
 
     // if row is not already meant to be hidden AND there is a value for filtering title AND this row's does NOT have a match, hide row 
 
     if (showRow && title && !($(this).find('.title').text().replace(/ /g, '').toLowerCase().match(title))) { 
 
     \t showRow = false; 
 
     } 
 
     // if row is not already meant to be hidden AND there is a value for filtering date AND this row's does NOT have a match, hide row 
 
     if (showRow && date && !($(this).find('.date').text().replace(/ /g, '').toLowerCase().match(date))) { 
 
     \t showRow = false; 
 
     } 
 
     
 
     if (showRow) { 
 
     \t $(this).show(); 
 
     } else { 
 
     \t $(this).hide(); 
 
     } 
 
     }); 
 
    } 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
    <tr class="header"> 
 
    <td>SN.</td> 
 
    <td>Title</td> 
 
    <td>Date</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input id="sn" type="text" placeholder="Search by SN" /> 
 
    </td> 
 
    <td> 
 
     <input id="title" type="text" placeholder="Search by Title" /> 
 
    </td> 
 
    <td> 
 
     <input id="date" type="text" placeholder="Search by Date" /> 
 
    </td> 
 
    </tr> 
 

 
    <tr class="fill"> 
 
    <td class="sn">RD 254691</td> 
 
    <td class="title">allan</td> 
 
    <td class="ate">29.10.2016</td> 
 
    </tr> 
 

 
    <tr class="fill"> 
 
<td class="sn">RB 252611</td> 
 
<td class="title">joy</td> 
 
    <td class="ate">29.10.2016</td> 
 
    </tr> 
 

 
    <tr class="fill"> 
 
    <td class="sn">RD 354792</td> 
 
    <td class="title">daisy</td> 
 
    <td class="date">29.10.2016</td> 
 
    </tr> 
 

 
    <tr class="fill"> 
 
    <td class="sn">RD 54692</td> 
 
    <td class="title">scot</td> 
 
    <td class="date">29.10.2016</td> 
 
    </tr> 
 
</table>