过滤文本输入 JavaScript - Filtering text input JavaScript

Filtering text input JavaScript

本文关键字：JavaScript 输入文本过滤 | 更新日期: 2023-09-27

我正在寻找过滤文本输入的组合框正在工作，但文本框正在工作到年龄。我想要的是过滤名称，但我没有想法要做。

组合框用于年龄，文本字段用于名称。

.HTML

所有年龄 16 18 20

<input />
 <table class="AvailableGroupLab availGrpLabs avalLabs">
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
     </thead>
<tbody>
    <tr>
        <td><span>wewe</span>
        </td>
        <td>16</td>
    </tr>
    <tr>
        <td><span>Melvin</span>
        </td>
        <td>18</td>
    </tr>
    <tr>
        <td><span>Marvin</span>
        </td>
        <td>20</td>
    </tr>
        <tr>
        <td><span>wewex</span>
        </td>
        <td>20</td>
    </tr>
     </tbody>
</table>

jQuery

function filter(element) {
         var $trs = $('.AvailableGroupLab tbody tr').hide();
        var regexp = new RegExp($(element).val(), 'i');  
        var $valid = $trs.filter(function () {
            return regexp.test($(this).find('td:last-child').text())
        }).show();
        $trs.not($valid).hide()
}
$('input, select').on('keyup change', function () {   
    if($(this).val() !== ""){
       filter(this);  
     } else{
        $('.AvailableGroupLab tbody tr').show();
    }
})

小提琴链接

我对你的代码做了一些更改。试试这个：

function filter(element) {
         var $trs = $('.AvailableGroupLab tbody tr').hide();
        var regexp = new RegExp($(element).val(), 'i');  
        var $valid = $trs.filter(function () {
            return isNaN($(element).val())?regexp.test($(this).find('td:first-child span').text()):regexp.test($(this).find('td:last-child').text());
        }).show();
        $trs.not($valid).hide()
}
$('input, select').on('keyup change', function () {   
    if($(this).val() !== ""){
       filter(this);  
     } else{
        $('.AvailableGroupLab tbody tr').show();
    }
})

JSFiddle： http://jsfiddle.net/NpLDn/1/

新的JSFiddle（带过滤器）：http://jsfiddle.net/NpLDn/4/