I want to implement search functionality on my div whose html is as below :
<input type="search" id="mysearch" placeholder="Search here" />
<div class="sken-cues-body" id="mydivbody">
<div class="sken-cue-card" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-title">Welcome to My Customer!</div>
<div class="sken-cue-text">
Want to help every sales agent like a <b>champion !</b>
</div>
<div class="">
<a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">Talking Points</div>
<div class="sken-cue-text" id="11">
<ul >
<li>Greet the customer</li>
<li>Ask if it is a good time to talk</li>
<li>Be polite & courteous on the call</li>
<li>Listen carefully</li>
<li>Thank the customer for their time</li>
</ul>
<p></p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title"></div>
<div class="sken-cue-text">
<p>
Introduce yourself and why you are calling, ask if it is a good time to talk<br>
</p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">
<p>
<span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br>
</p>
</div>
<div class="sken-cue-text">
<p>
If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start paying the EMIs to avoid unnecessary legal hassles<br>
<br>
</p>
</div>
</div>
</div>
</div>
For implemention search functionality,i need to recursive iteration inside div with ID mydivbody. Below is javascript function for recursive iteration in div with ID mydivbody:
document.getElementById('mysearch').addEventListener('keyup',function(){
var node = document.getElementById('mydivbody')
allDescendants(node,this.value)
});
function allDescendants (node) {
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
allDescendants(child);
console.log(child)
}
//doSomethingToNode(child,search_value);
}
But in this js function, i can see all child nodes where i am consoling the child along with entire parent div. for me node is getting duplicated. Please suggest how to fix this