Filtrar usando la entrada de texto en el elemento Div
Frecuentes
Visto 1,294 equipos
0
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,
1 Respuestas
0
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
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery jquery-filter or haz tu propia pregunta.
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