Javascript 使用Div元素上的文本输入进行筛选

我尝试使用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>  

全局筛选
名称
电子邮件
部门
电话
经理
丽莎
some@mail.com
销售额
123456789
约翰
做记号
some@mail.com
技术
123456789
亚历克斯

我需要的是，如果有人在输入字段“manager”中键入内容，它将仅在manager列中搜索匹配词，如果在其他字段中键入，则具有相同的功能。这只是一个搜索pertime，我有下拉选项与元素将搜索与隐藏和显示输入

只需要过滤功能。非常感谢你的帮助。这里是小提琴链接

谢谢，

试试这个

<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');
        }
    });
});

全局筛选
名称
电子邮件
部门
电话
经理
丽莎
some@mail.com
销售额
123456789
约翰
做记号
some@mail.com
技术
123456789
亚历克斯
$（'input[type=“text”]”）。keyup（函数（）{
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筛选的功能是什么？请查看此链接以进行全局搜索和个人搜索