JSFiddle - React, Tailwind, and code Playground

by jnbdz

HTML

<input type="text" id="search" autocomplete="off"/>
<div id="result"></div>

<div style="display: none;">
    <div id="one">Text for element #1.</div>
    <div id="two">Text for element #2.</div>
    <div id="three">Text for element #3.</div>
    <div id="four">Text for element #4.<div id="a">Bob!<div id="b">Toto!<div id="c">Coco!</div></div></div></div>

    <div class="one">Text for element #1.</div>
    <div class="two">Text for element #2.</div>
    <div class="three">Text for element #3.</div>
    <div class="four">Text for element #4.<div class="a">Bob!<div class="b">Toto!<div class="c">Coco!</div></div></div></div>
</div>

CSS

ul {
    list-style: none;
}
li {
    padding-left: 15px;
}
.display-none {
    display: none;
}
.display-block {
    display: block;
}

JavaScript

var att = ['accesskey',
           'class',
           'contenteditable',
           'contextmenu',
           'dir',
           'draggable',
           'dropzone',
           'hidden',
           'id',
           'lang',
           'spellcheck',
           'title',
           'href',
           'target',
           'type',
           'name'
          ];
var target = ['_blank',
              '_parent',
              '_self',
              '_top'
             ],
    rel = ['alternate',
           'author',
           'bookmark',
           'help',
           'license',
           'next',
           'nofollow',
           'noreferrer',
           'prefetch',
           'prev',
           'search',
           'tag'
    ];
var htmlIDs = $$('*[id]').get('id'),
    htmlClass = $$('*[class]').get('class');

var list = new Element('ul', {
        
    }).inject('result');

htmlIDs.each(function(val) {
    new Element('li', {
        'class': 'selector-type-id display-none',
        'text': val.clean()
    }).inject(list);
});

htmlClass.each(function(val) {
    new Element('li', {
        'class': 'selector-type-class display-none',
        'text': val.clean()
    }).inject(list);
});

document.id('search').addEvents({
    'keyup': function(e){
        var searchOptions = list.getElements('li');
        if(e.key != 'down' && e.key != 'up' && e.key != 'enter' && e.key != 'left' && e.key != 'right') {
            searchOptions.each(function(el) {
                var value = document.id('search').get('value');
                if(value.length == 0) {
                    el.addClass('display-none');
                }
                else if (el.get('text').test("^" + value, 'i')) {
                    el.removeClass('display-none');
                }
                else {
                    el.addClass('display-none');
                }
            });
        }
    }
});