How do I filter the text, "positivity" while preserving parents?

JavaScript
1

How do I filter the text, “positivity” while preserving parents. Note the parents are in ascending order. Example if you have ‘the class child-1’ is a child child-2 is another child and so on. When you have a class child-0 followed by another child-0 the first class child-0 has no children. Pure javascript please. Thanks in advance.

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">   
    </head>
    <body>
        <form>
            <input type="text" id="searchFilter" name="searchFilter" placeholder="Search" 
                   onkeyup="filterItems(this);">
            <select id="help-my-brother" name="ddVehicles" size="4">
                <option value="-1">None</option>
                <option class="child-0" value="1">United States</option>
                <option class="child-0" value="2">Australia</option>
                <option class="child-0" value="3">Brazil</option>
                <option class="child-1" value="4">&nbsp;&nbsp;&nbsp;Iceland</option>
                <option class="child-2" value="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UK</option>
                <option class="child-0" value="6">Germany</option>
                <option class="child-1" value="7">&nbsp;&nbsp;&nbsp;Italy</option>
                <option class="child-2" value="8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;France</option>
                <option class="child-3" value="9">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;China</option>
                <option class="child-4" value="10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positivity</option>
                <option class="child-0" value="11">Japan</option>
                <option class="child-0" value="12">Argentina</option>
                <option class="child-0" value="13">Colombia</option>
                <option class="child-0" value="14">Mexico</option> 
                <option class="child-0" value="15">Chile</option>
                <option class="child-0" value="16">Venezuela</option>
                <option class="child-0" value="17">Peace and love</option>
                <option class="child-0" value="18">Florida</option>
                <option class="child-1" value="19">&nbsp;&nbsp;&nbsp;Hug</option>
                <option class="child-2" value="20">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Action</option>
                <option class="child-3" value="21">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Adaptable</option>
                <option class="child-4" value="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positivity</option>
                <option class="child-0" value="23">Love</option>
                <option class="child-1" value="24">&nbsp;&nbsp;&nbsp;charisma</option>
                <option class="child-2" value="25">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Charm</option>
                <option class="child-3" value="26">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positivity</option>
                <option class="child-4" value="27">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Friend</option>
                <option class="child-0" value="28">Peru</option>
                <option class="child-1" value="29">&nbsp;&nbsp;&nbsp;clarity</option>
                <option class="child-0" value="30">collaboration</option>
                <option class="child-0" value="31">companionship</option>
                <option class="child-0" value="32">Communication</option>
                <option class="child-0" value="33">reliable</option>
            </select>
        </form>
        <script>
            var optionsCache = [];
            function filterItems(el) {
                var value = el.value.toLowerCase();
                var form = el.form;
                var opt, sel = form.ddVehicles;
                if (value == '') {
                    restoreOptions();
                } else {
                    // Loop backwards through options as removing them modifies the next
                    // to be visited if go forwards
                    for (var i = sel.options.length - 1; i >= 0; i--) {
                        opt = sel.options[i];
                        if (opt.text.toLowerCase().indexOf(value) == -1) {
                            sel.removeChild(opt)
                        }
                    }
                }
            }

// Restore select to original state
            function restoreOptions() {
                var sel = document.getElementById('help-my-brother');
                sel.options.length = 0;
                for (var i = 0, iLen = optionsCache.length; i < iLen; i++) {
                    sel.appendChild(optionsCache[i]);
                }
            }

            window.onload = function () {
                // Load cache
                var sel = document.getElementById('help-my-brother');
                for (var i = 0, iLen = sel.options.length; i < iLen; i++) {
                    optionsCache.push(sel.options[i]);
                }
            }
        </script>
    </body>
</html>
2

I’m confused.

Can you show us what your desired end-state would be, given the above as a starting-state?

1 Like
3

I thought better of it and it would be nice if the child showed up. the result in the search for positivity has to be this.
``

<form>
            <input type="text" id="searchFilter" name="searchFilter" placeholder="Search" 
                   onkeyup="filterItems(this);">
            <select id="help-my-brother" name="ddVehicles" size="4">
                <option class="child-0" value="6">Germany</option>
                <option class="child-1" value="7">&nbsp;&nbsp;&nbsp;Italy</option>
                <option class="child-2" value="8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;France</option>
                <option class="child-3" value="9">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;China</option>
                <option class="child-4" value="10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positivity</option>
                <option class="child-0" value="18">Florida</option>
                <option class="child-1" value="19">&nbsp;&nbsp;&nbsp;Hug</option>
                <option class="child-2" value="20">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Action</option>
                <option class="child-3" value="21">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Adaptable</option>
                <option class="child-4" value="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positivity</option>
                <option class="child-0" value="23">Love</option>
                <option class="child-1" value="24">&nbsp;&nbsp;&nbsp;charisma</option>
                <option class="child-2" value="25">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Charm</option>
                <option class="child-3" value="26">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positivity</option>
                <option class="child-4" value="27">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Friend</option>
            </select>
        </form>

`

4

Ah okay, I get it now.

Well, here’s the logic for how i would do it. I have made no effort to optimize it.

Create an array, with size equal to the number of options, and fill it with false. We’ll call it mask.
Set mask[0] to true.
For 1 to the number of options i
If mytext contains “prosperity”,
For 0 to the number of that element’s child-class, called j
Set mask[i-j] equal to true.
Endfor j
EndIf
Endfor i
Foreach mask as value using index;
if value is false,
remove the index’th option element from the DOM.
Endif
Endforeach.

5

Thanks for the answer, question already answered

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.