JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<p>
    Search: <input type="text" class="filter">
</p>

<table>
    <thead>
        <tr>
                        <th>Url</th>
                        <th>Path</th>
                        <th>Title</th>
                        <th>Subject</th>
                        <th>Brief</th>
                        <th>Keywords</th>
                        <th>Content type</th>
                        <th>Author</th>
                        <th>Related links</th>
                        <th>Level 3 section</th>
                        <th>Best bets</th>
                        <th>Exclude from index</th>
                        <th class="table-th-nosort">Actions</th>
        </tr>
    </thead>
    <tbody>
                <tr>
                        <td>http://google.com</td>
                        <td>google.com</td>
                        <td>Google test page</td>
                        <td>Awesome subject</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td class="actions">
                [ <a href="/pages/show/1">show</a> |
                <a href="/pages/edit/1">edit</a> |
                <a href="/pages/delete/1">delete</a> ]
            </td>
        </tr>
                <tr>
                        <td>fjklajspdfoiu</td>
                        <td>poiu</td>
                        <td>fawetaset</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td class="actions">
                [ <a href="/pages/show/2">show</a> |
            ...

JavaScript

window.addEvent('domready', function(){
  
    $$('.filter').each(function(item){
        var table = document.getElement('table').getElements('tbody > tr');
        new ElementFilter(item, table, {
            property: 'html',
            onHide: function(el){
                el.setStyle('background', '');
            },
            onShow: function(el){
                el.setStyle('background', 'yellow');
            }
        })
    });

  
});
        
        /*
---
description:     ElementFilter

authors:
  - David Walsh (http://davidwalsh.name)

license:
  - MIT-style license

requires:
  core/1.2.1:   '*'

provides:
  - ElementFilter
...
*/
var ElementFilter = new Class({

    Implements: [Options,Events],

    options: {
        /*
        onStart: $empty,
        onShow: $empty,
        onHide: $empty,
        onComplete: $empty,
        */
        cache: true,
        caseSensitive: false,
        ignoreKeys: [13, 27, 32, 37, 38, 39, 40],
        matchAnywhere: true,
        property: 'text',
        trigger: 'keyup'
    },

    initialize: function(observeElement,elements,options) {
        //set options
        this.setOptions(options);
        //set elements and element
        this.observeElement = document.id(observeElement);
        this.elements = $$(elements);
        this.matches = this.elements;
        this.misses = [];
        //start the listener
        this.listen();
    },

    //adds a listener to the element (if there's a value and if the event code shouldn't be ignored)
    listen: function() {
        //add the requested event
        this.observeElement.addEvent(this.options.trigger,function(e) {
            //if there's a value in the box...
            if(this.observeElement.value.length) {
                //if the key should not be ignored...
                if(!this.options.ignoreKeys.contains(e.code)) {
                    this.fireEvent('start');
                    this.findMatches(this.options.cache ? this.matches :...