Filter using text input on Div element

Question

I try to creating filter for div element using keyup, but its not work. Example, i have 5 input will do search by id like in the html below :

<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>  

What i need if someone type something on the input field "manager" it will searching match word in the manager column only, with same function if type in other field. This is only one search pertime, i have the dropdown option with element will search with hiding and show the input.

Only need the filtering function. Really appreciated the help. And here is the fiddle link http://jsfiddle.net/nucleo1985/kdKZR/

Thanks,

Answer 1

try this,

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