Filter array (Not done)

emilo Post Leave a Comment

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" oninput="filterArray(this.value)" placeholder="SEARCH" />
    <button onclick="addItem()">Add</button>
    <div id="content"></div>
    <div id="filterContent"></div>
    <div id="edit"></div>
    <script>
        var array = [];
        function addItem(i) {
            var obj = { Name: "Fred" };
            array.push(obj);
            showItems();
        }
        function showItems() {
            var html = "";
            for (var i = 0; i < array.length; i++) {
                let obj = array[i];
                html += `<div>
                             <span>${obj.Name}</span>
                             <span>${i}</span>
                             <button onclick="editItem(${i})">EDIT</button>
                             <button onclick="deleteItem(${i})">DELETE</button>
                             </div>`;
            }
            document.getElementById('content').innerHTML = html;
        }
        function deleteItem(i) {
            array.splice(i, 1);
            showItems();
        }
        function editItem(i) {
            let obj = array[i];
            document.getElementById('edit').innerHTML = `
                <input id="name" type="text" value="${obj.Name}"></input>
                <button onclick="saveItem(${i})">Save</button>
`;
        }

        function saveItem(i) {
            let obj = array[i];
            obj.Name = document.getElementById('name').value;
            showItems()
            document.getElementById('edit').innerHTML = ``;
        }
        function filterArray(txt) {
            let filterArray = [];
            txt = txt.toLowerCase();
            for (let obj of array) {
                if (obj.Name.toLowerCase().includes(txt)) {
                    filterArray.push(obj);
                }
                console.log(filterArray);
            }

        }
        
    </script>
</body>
</html>