DOM Search

function domSearch(selector, caseSensitive) {

    let element = $(selector);

    let addDiv = $("<div class='add-controls'>")
        .append($("<label>Enter text:<input id='input'></label>"))
        .append($("<a class='button'>Add</a>")
            .on('click', addText()));

    let searchDiv = $("<div class='search-controls'>")
        .append($("<label id='searched'>Search:</label>")
            .append($("<input>")
                .on('input', searchText())));

    let resultDiv = $("<div class='result-controls'>")
        .append($("<ul class='items-list'></ul>"));

    element.append(addDiv);
    element.append(searchDiv);
    element.append(resultDiv);


    function addText() {
        let text = $("#input").val();

        let li = $("<li>")
            .append($("<a class='button'>X</a>")
                .on('click', $(this).parent().remove()))
            .append(`<strong>${text}</strong>`);

        $(".items-list").append(li);
    }

    function searchText() {
        let searched = $("#searched").val();

        if (searched === undefined) {
            searched = "";
        }

        let pattern = new RegExp(searched, "g");

        if (!caseSensitive) {
            pattern.ignoreCase;
        }

        let list = $(".items-list li");

        for (let li of list) {
            if (pattern.test(li.val())) {
                li.css("display", "");
            } else {
                li.css("display", "none");
            }
        }
    }
}