live searchable apache index page directory listings

after.html

<!--
Make sure the local (or global) .htaccess file has the following line
ReadmeName after.html
-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<style>

mark {
  padding: 0px;
  color: #f00;
  background: none;
}

#filter {
    margin: 10px;
}

</style>

    <script>
    $(function() {
        var middlerows = $("tr:not(:first):not(:last)");
        console.log(middlerows);
        var markre = function(pattern) {
            context=middlerows;
            context.show();
            context.unmark();
            var modifier = "";
            if (pattern.toLowerCase() == pattern) modifier = "i"; // like :set smartcase in vim (case-sensitive if there's an uppercase char)
            var regex = new RegExp(pattern,modifier);
            context.markRegExp(regex,{
                done: function(counter) {
                    context.not(":has(mark)").hide();
                    console.log(counter);
                    if (counter < 1) {
                        context.show();
                    }
                },
            });
        };

        $("html").prepend("<input id=\"filter\" placeholder=\"Search/wildcard filter\" />");
        $( "input[id='filter']" ).on('keyup', function() {
            var pattern = $(this).val();
            markre(pattern);
            window.location.hash = escape($("#filter").val());
        });

        // vimlike incsearch: press / to focus on search box
        $(document).keydown(function(e) {
            console.log($(event.target));
            console.log(e.keyCode);
            if(e.keyCode == 191) {
                // / focus search box
                e.preventDefault();
                $("#filter").focus().select();
            }
        });

        if (window.location.hash) {
            var search = unescape(window.location.hash.split("#")[1]);
            $("#filter").val(search);
            markre($("#filter").val());
        }



    });
    </script>