使用jQuery在表上区分大小写的实时搜索

时间:2016-09-02 14:58:12

标签: javascript jquery html

我使用jQuery在表上进行实时搜索。它工作得很好,但不区分大小写,因此jimJim不会显示相同。

演示: http://jsfiddle.net/qxks62x9/

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var id = $.map($row.find('td'), function(element) {
    return $(element).text()
}).join(' ');

            
             

						
            if (id.indexOf(value) <0) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});
table, tr, td, th{
    border: 1px solid blue;
    padding: 2px;
}

table th{
    background-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr>
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr>
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

1 个答案:

答案 0 :(得分:3)

你可以只小写两个字符串。

小提琴:https://jsfiddle.net/maq2xmrv/

  • (id.toLowerCase().indexOf(value.toLowerCase()) < 0)