Filtrar usando la entrada de texto en el elemento Div

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/

Gracias,

preguntado el 08 de febrero de 14 a las 14:02

1 Respuestas

prueba esto,

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

Respondido 08 Feb 14, 14:02

The above code is not working on global filter. have try it on name and other individual fields? - snehal s

Ahh sorry, its work now. What function to enabling global filter instead div filter? - Hendra Núcleo

check out this link for global as well as individual search jsfiddle.net/snehal_sat/RSM3S/2 - snehal s

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.