Answer to Question #326086 in HTML/JavaScript Web Application for AVN

Question

Answer to Question #326086 in HTML/JavaScript Web Application for AVN

Question #326086

I'm not getting any output to search item in a mart code So,please verify it

Expert's answer

<!DOCTYPE html>
<html>


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: Arial;
        }


        * {
            box-sizing: border-box;
        }


        form.example input[type=text] {
            padding: 10px;
            font-size: 17px;
            border: 1px solid grey;
            float: left;
            width: 80%;
            background: #f1f1f1;
        }


        form.example button {
            float: left;
            width: 20%;
            padding: 10px;
            background: #2196F3;
            color: white;
            font-size: 17px;
            border: 1px solid grey;
            border-left: none;
            cursor: pointer;
        }


        form.example button:hover {
            background: #0b7dda;
        }


        form.example::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>


<body>


    <h2>Search Button</h2>


    <p>Full width:</p>
    <form class="example" action="/action_page.php">
        <input type="text" id="search" placeholder="Search.." name="search" onkeyup="searching()">
        <button type="submit" onclick="searching()"><i class="fa fa-search"></i></button>
    </form>


    <ul id="list"></ul>
    <script>
        document.getElementById('search').value = ''
        let list = [];
        for (let i = 1; i <= 50; i++) {
            let li = document.createElement('li')
            li.innerText = 'lorem' + i
            list.push(li)
            document.getElementById('list').append(li)
        }


        function searching() {
            if (document.getElementById('search').value) {
                let new_list = [...list]
                document.getElementById('list').remove()
                new_list = list.filter(x => x.innerText.startsWith(document.getElementById('search').value))
                let ul = document.createElement('ul')
                ul.setAttribute('id', 'list')
                for (let j = 0; j < new_list.length; j++) {
                    ul.append(new_list[j])
                }
                document.body.append(ul)
            }
            else {
                document.getElementById('list').remove()
                let ul = document.createElement('ul')
                ul.setAttribute('id', 'list')
                for (let j = 0; j < list.length; j++) {
                    ul.append(list[j])
                }
                document.body.append(ul)
            }
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #326086 in HTML/JavaScript Web Application for AVN

Comments

Leave a comment

Related Questions