javascript - DOM traversing for a searched keyword is not showing as expected? -
i trying implement filtering mechanism using javascript in ui traverse through dom , find searched word. how html , ui looks like.
so idea once data(which dynamic) loaded back-end(through java) want traverse dom in html particular keyword searched. how writing js in jquery
$(document).ready(function() { jquery('#txtsearch').keyup(function(event){ if (event.keycode == 27) { resetsearch(); } if (jquery('#txtsearch').val().length > 0) { jquery('.list-group-item').hide(); jquery('.list-group-item span.assignee-style:contains(\'' + jquery('#txtsearch').val() + '\')'). parent('li').parent('ul').parent('li').show(); } if (jquery('#txtsearch').val().length == 0) { resetsearch(); } }); function resetsearch(){ jquery('#txtsearch').val(''); jquery('.list-group-item').show(); jquery('#txtsearch').focus(); } });
the behavior expecting when search "john" want data(in 3 columns) contains "john" appear. start traversing dom assignee name only. results not wanted. doing wrong?
.parent
takes selector, not tag name, why not simplify to:
$(document).ready(function() { jquery('#txtsearch').keyup(function(event){ var search = jquery('#txtsearch').val(); if (event.keycode == 27) { resetsearch(); } if (search.length > 0) { jquery('.list-group-item').hide(); jquery('.list-group-item span.assignee-style:contains(\'' + search + '\')'). parent('.list-group-item').show(); } else { resetsearch(); } }); function resetsearch(){ jquery('#txtsearch').val(''); jquery('.list-group-item').show(); jquery('#txtsearch').focus(); } });
Comments
Post a Comment