How do I filter the textual content, “positivity” whereas preserving mother and father. Notice the mother and father are in ascending order. Instance you probably have ‘the category child-1’ is a baby child-2 is one other youngster and so forth. When you might have a category child-0 adopted by one other child-0 the primary class child-0 has no youngsters. Pure javascript please. Thanks upfront.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
</head>
<physique>
<kind>
<enter kind="textual content" id="searchFilter" title="searchFilter" placeholder="Search"
onkeyup="filterItems(this);">
<choose id="help-my-brother" title="ddVehicles" dimension="4">
<choice worth="-1">None</choice>
<choice class="child-0" worth="1">United States</choice>
<choice class="child-0" worth="2">Australia</choice>
<choice class="child-0" worth="3">Brazil</choice>
<choice class="child-1" worth="4"> Iceland</choice>
<choice class="child-2" worth="5"> UK</choice>
<choice class="child-0" worth="6">Germany</choice>
<choice class="child-1" worth="7"> Italy</choice>
<choice class="child-2" worth="8"> France</choice>
<choice class="child-3" worth="9"> China</choice>
<choice class="child-4" worth="10"> positivity</choice>
<choice class="child-0" worth="11">Japan</choice>
<choice class="child-0" worth="12">Argentina</choice>
<choice class="child-0" worth="13">Colombia</choice>
<choice class="child-0" worth="14">Mexico</choice>
<choice class="child-0" worth="15">Chile</choice>
<choice class="child-0" worth="16">Venezuela</choice>
<choice class="child-0" worth="17">Peace and love</choice>
<choice class="child-0" worth="18">Florida</choice>
<choice class="child-1" worth="19"> Hug</choice>
<choice class="child-2" worth="20"> Motion</choice>
<choice class="child-3" worth="21"> Adaptable</choice>
<choice class="child-4" worth="22"> positivity</choice>
<choice class="child-0" worth="23">Love</choice>
<choice class="child-1" worth="24"> charisma</choice>
<choice class="child-2" worth="25"> Allure</choice>
<choice class="child-3" worth="26"> positivity</choice>
<choice class="child-4" worth="27"> Good friend</choice>
<choice class="child-0" worth="28">Peru</choice>
<choice class="child-1" worth="29"> readability</choice>
<choice class="child-0" worth="30">collaboration</choice>
<choice class="child-0" worth="31">companionship</choice>
<choice class="child-0" worth="32">Communication</choice>
<choice class="child-0" worth="33">dependable</choice>
</choose>
</kind>
<script>
var optionsCache = [];
operate filterItems(el)
var worth = el.worth.toLowerCase();
var kind = el.kind;
var decide, sel = kind.ddVehicles;
if (worth == '')
restoreOptions();
else
// Loop backwards via choices as eradicating them modifies the subsequent
// to be visited if go forwards
for (var i = sel.choices.size - 1; i >= 0; i--)
decide = sel.choices[i];
if (decide.textual content.toLowerCase().indexOf(worth) == -1)
sel.removeChild(decide)
// Restore choose to authentic state
operate restoreOptions()
var sel = doc.getElementById('help-my-brother');
sel.choices.size = 0;
for (var i = 0, iLen = optionsCache.size; i < iLen; i++)
sel.appendChild(optionsCache[i]);
window.onload = operate ()
// Load cache
var sel = doc.getElementById('help-my-brother');
for (var i = 0, iLen = sel.choices.size; i < iLen; i++)
optionsCache.push(sel.choices[i]);
</script>
</physique>
</html>
I’m confused.
Are you able to present us what your required end-state can be, given the above as a starting-state?
1 Like
I believed higher of it and it could be good if the kid confirmed up. the end result within the seek for positivity must be this.
``
<kind>
<enter kind="textual content" id="searchFilter" title="searchFilter" placeholder="Search"
onkeyup="filterItems(this);">
<choose id="help-my-brother" title="ddVehicles" dimension="4">
<choice class="child-0" worth="6">Germany</choice>
<choice class="child-1" worth="7"> Italy</choice>
<choice class="child-2" worth="8"> France</choice>
<choice class="child-3" worth="9"> China</choice>
<choice class="child-4" worth="10"> positivity</choice>
<choice class="child-0" worth="18">Florida</choice>
<choice class="child-1" worth="19"> Hug</choice>
<choice class="child-2" worth="20"> Motion</choice>
<choice class="child-3" worth="21"> Adaptable</choice>
<choice class="child-4" worth="22"> positivity</choice>
<choice class="child-0" worth="23">Love</choice>
<choice class="child-1" worth="24"> charisma</choice>
<choice class="child-2" worth="25"> Allure</choice>
<choice class="child-3" worth="26"> positivity</choice>
<choice class="child-4" worth="27"> Good friend</choice>
</choose>
</kind>
`
Ah okay, I get it now.
Properly, right here’s the logic for the way i'd do it. I've made no effort to optimize it.
Create an array, with dimension equal to the variety of choices, and fill it with false. We’ll name it masks.
Set masks[0] to true.
For 1 to the variety of choices i
If mytext accommodates “prosperity”,
For 0 to the variety of that aspect’s child-class, known as j
Set masks[i-j] equal to true.
Endfor j
EndIf
Endfor i
Foreach masks as worth utilizing index;
if worth is fake,
take away the index’th choice aspect from the DOM.
Endif
Endforeach.
