Dom Search

function domSearch(container,sensitivity){
        if(!$(container).is('.add-controls,.search-controls,.result-controls'))$(container).attr('class','items-control');
        console.log($(container));
        let addControls = $('<div>');
        addControls.attr('class','add-controls');
        addControls.append($('<label>').text('Enter text: ')
                .append('<input>'))
                .append($('<a>').attr('class','button').attr('style','display: inline-block').text('Add'));
        $(container + '.items-control').append(addControls);
        let searchControls = $('<div>');
        searchControls
                .attr('class','search-controls')
                .append($('<label>').text('Search:').append('<input>'));
        $(container + '.items-control').append(searchControls);
        let resultControls = $('<div>');
        let ul = $('<ul>').attr('class','items-list');
        ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text('Element1')));
        ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text('Element2')));
        ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text('Another Element')));
        ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text('Item1')));
        ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text('Item2')));
        ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text('List Item')));
        $(container + ' .add-controls .button').on('click',function () {
            let text = $(container + ' .add-controls input').val();
            ul.append($('<li>').attr('class','list-item').append($('<a>').attr('class','button').text('X')).append($('<strong>').text(text)));
        });
        resultControls.attr('class','result-controls').append(ul);
        $(container + '.items-control').append(resultControls);
        $(container + ' ul').on('click','a.button',function () {
            $(this).parent().remove();
        });
        $(container + ' .search-controls input').on('keyup',function () {
            let searchedText = $(container + ' .search-controls input').val();
            let ulOfItems;
            if(sensitivity == true){
                ulOfItems = $(container + ' .result-controls .items-list li strong').toArray();
                for(let str of ulOfItems){
                    let word = str.textContent;
                    if(word.indexOf(searchedText) == -1){
                        $(str).parent().attr('style','display: none');
                    }
                    else{
                        $(str).parent().removeAttr('style');
                    }
                }
            }
            else{
                searchedText = searchedText.toLowerCase();
                ulOfItems = $(container + ' .result-controls .items-list li strong').toArray();
                for(let str of ulOfItems){
                    let word = str.textContent.toLowerCase();
                    if(word.indexOf(searchedText) == -1){
                        $(str).parent().attr('style','display: none');
                    }
                    else{
                        $(str).parent().removeAttr('style');
                    }
                }
            }
        });
    }