Question

我尝试使用keyup为div元素创建过滤器，但它不起作用。例如，我有5个输入将按ID搜索，如下面的html：

<div class="input">

                <div class="all_all" id="filter_global">
                    <div align="left">Global filtering</div>
                    <div align="left"><input type="text" name="global_filter" id="global_filter"></div>
                    <div align="left"><input type="checkbox" name="global_regex"  id="global_regex" ></div>
                    <div align="left"><input type="checkbox" name="global_smart"  id="global_smart"  checked></div>
                </div>
                <div class="one" id="filter_col1">
                    <div align="left">Name</div>
                    <div align="left"><input type="text"     name="col1_filter" id="col1_filter"></div>
                    <div align="left"><input type="checkbox" name="col1_regex"  id="col1_regex"></div>
                    <div align="left"><input type="checkbox" name="col1_smart"  id="col1_smart" checked></div>
                </div>
                <div class="two" id="filter_col2">
                    <div align="left">Email</div>
                    <div align="left"><input type="text" name="col2_filter" id="col2_filter"></div>
                    <div align="left"><input type="checkbox" name="col2_regex"  id="col2_regex"></div>
                    <div align="left"><input type="checkbox" name="col2_smart"  id="col2_smart" checked></div>
                </div>
                <div class="tri" id="filter_col3">
                    <div align="left">Department</div>
                    <div align="left"><input type="text"     name="col3_filter" id="col3_filter"></div>
                    <div align="left"><input type="checkbox" name="col3_regex"  id="col3_regex"></div>
                    <div align="left"><input type="checkbox" name="col3_smart"  id="col3_smart" checked></div>
                </div>
                <div class="four" id="filter_col4">
                    <div align="left">Phone</div>
                    <div align="left"><input type="text"     name="col4_filter" id="col4_filter"></div>
                    <div align="left"><input type="checkbox" name="col4_regex"  id="col4_regex"></div>
                    <div align="left"><input type="checkbox" name="col4_smart"  id="col4_smart" checked></div>
                </div>
                <div class="five" id="filter_col5">
                    <div align="left">Manager</div>
                    <div align="left"><input type="text"     name="col5_filter" id="col5_filter"></div>
                    <div align="left"><input type="checkbox" name="col5_regex"  id="col5_regex"></div>
                    <div align="left"><input type="checkbox" name="col5_smart"  id="col5_smart" checked></div>
                </div>

</div>
<div class="content">
    <div class="content-wrap" id="content-one">
        <div>Lisa</div>
        <div>some@mail.com</div>
        <div>Sales</div>
        <div>123456789</div>
        <div>John</div>
    </div>
    <div class="content-wrap" id="content-two">
        <div>Mark</div>
        <div>some@mail.com</div>
        <div>Technic</div>
        <div>123456789</div>
        <div>Alex</div>
    </div>
</div>

如果有人在输入字段“manager”上键入内容，我只需要在管理器列中搜索匹配字，如果键入其他字段，则使用相同的功能。这只是一个搜索条件，我有元素的下拉选项将搜索隐藏并显示输入。

只需要过滤功能。真的很感激帮助。这里是小提琴链接http://jsfiddle.net/nucleo1985/kdKZR/

谢谢，

Answer 1

试试这个，

<div class="input">
    <div class="all_all" id="filter_global">
        <div align="left">Global filtering</div>
        <div align="left"><input type="text" name="global_filter" id="global_filter"></div>
        <div align="left"><input type="checkbox" name="global_regex"  id="global_regex" ></div>
        <div align="left"><input type="checkbox" name="global_smart"  id="global_smart"  checked></div>
    </div>
    <div class="one" id="filter_col1">
        <div align="left">Name</div>
        <div align="left"><input type="text" name="col1_filter" id="col1_filter" class="name"></div>
        <div align="left"><input type="checkbox" name="col1_regex"  id="col1_regex"></div>
        <div align="left"><input type="checkbox" name="col1_smart"  id="col1_smart" checked></div>
    </div>
    <div class="two" id="filter_col2">
        <div align="left">Email</div>
        <div align="left"><input type="text" name="col2_filter" id="col2_filter" class="email"></div>
        <div align="left"><input type="checkbox" name="col2_regex"  id="col2_regex"></div>
        <div align="left"><input type="checkbox" name="col2_smart"  id="col2_smart" checked></div>
    </div>
    <div class="tri" id="filter_col3">
        <div align="left">Department</div>
        <div align="left"><input type="text"     name="col3_filter" id="col3_filter" class="department"></div>
        <div align="left"><input type="checkbox" name="col3_regex"  id="col3_regex"></div>
        <div align="left"><input type="checkbox" name="col3_smart"  id="col3_smart" checked></div>
    </div>
    <div class="four" id="filter_col4">
        <div align="left">Phone</div>
        <div align="left"><input type="text"     name="col4_filter" id="col4_filter" class="phone"></div>
        <div align="left"><input type="checkbox" name="col4_regex"  id="col4_regex"></div>
        <div align="left"><input type="checkbox" name="col4_smart"  id="col4_smart" checked></div>
    </div>
    <div class="five" id="filter_col5">
        <div align="left">Manager</div>
        <div align="left"><input type="text"     name="col5_filter" id="col5_filter" class="manager"></div>
        <div align="left"><input type="checkbox" name="col5_regex"  id="col5_regex"></div>
        <div align="left"><input type="checkbox" name="col5_smart"  id="col5_smart" checked></div>
    </div>      
</div>

<div class="content">
    <div class="content-wrap" id="content-one">
    <div class="name">Lisa</div>
    <div class="email">some@mail.com</div>
    <div class="department">Sales</div>
    <div class="phone">123456789</div>
    <div class="manager">John</div>
    </div>
<div class="content-wrap" id="content-two">
    <div class="name">Mark</div>
    <div class="email">some@mail.com</div>
    <div class="department">Technic</div>
    <div class="phone">123456789</div>
        <div class="manager">Alex</div>
</div>
 </div> 


$('input[type="text"]').keyup(function() {
    var col_name = $(this).attr('class');
    var search_val = $(this).val().toLowerCase();
    $('.' + col_name).closest('.content-wrap').css('display', 'none');
    $('.' + col_name).each(function() {
        var val = $(this).text();
        if(val.toLowerCase().indexOf(search_val) >= 0) {
            $(this).closest('.content-wrap').css('display', 'block');
        }
    });
});

使用Div元素上的文本输入进行过滤

1 个答案: