如何做到边搜索输入文字检索呢，其实很简单。
就是在搜索监听keyup 事件，然后在搜索的数据内对比当前输入的文字和数据内的文字是否一致，一致的话就显示出来，不一致就隐藏其他的数据，之后就是隐藏时候的动画效果了。

接下代码效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            font-family: '微软雅黑';
            color: #FFF;
        }

        body * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
        }

        .note {
            text-align: center;
            margin: 20px 0;
        }

        .note a {
            color: white;
        }

        .container {
            max-width: 300px;
            height: 400px;
            margin: auto;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 10px;
            background: #fb0;
            box-shadow: 60px 0 0 #4a5, 180px 0 0 #f22, 120px 0 0 #18f, 240px 0 0 #94f;
            width: 20%;
        }

        .search {
            display: flex;
            height: 40px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
            z-index: 10;
            position: relative;
        }

        .search .input {
            flex: 1;
        }

        .search .input input {
            width: 100%;
            height: 40px;
            font-size: 14px;
            padding: 0 10px;
        }

        .search .icon {
            width: 40px;
            height: 40px;
            text-align: center;
            background: #FFF;
            color: #f35;
            line-height: 40px;
        }

        .search .results {
            position: absolute;
            bottom: -26px;
            right: 0;
            color: white;
            background: rgba(0, 0, 0, 0.25);
            padding: 5px 10px;
            border-radius: 0 0 0 4px;
            font-size: 12px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        }

        .display {
            flex: 1;
            background: #f35;
            overflow-y: auto;
        }

        .display .item {
        /*  height: 80px;
            max-height: 80px;*/
            overflow: hidden;
            opacity: 1;
            background: rgba(0, 0, 0, 0.25);
            padding: 10px;
            animation: opacitize 0.2s;
            transition: all 0.2s;
        }

        .display .item .title {
            font-weight: 600;
            font-size: 16px;
        }

        .display .item .description {
            opacity: 0.9;
            font-size: 14px;
        }

        .display .item.hide {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
        }

        .display .item a {
            color: #FFF;
            text-decoration: none;
        }

        @keyframes opacitize {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header"></div>
    <div class="search">
        <div class="icon">搜</div>
        <div class="input">
            <input/>
        </div>
        <div class="results">Showing: <span class="count"></span></div>
    </div>
    <div class="display"></div>
</div>
<script src='data.js'></script>
<script>
    var app = {
        data: data,
        html: {
            searchbar: document.querySelectorAll('.search input')[0],
            display: document.querySelectorAll('.display')[0],
            count: document.querySelectorAll('.count')[0]
        },
        init: function () {
            app.render();
            app.html.searchbar.addEventListener('keyup', function () {
                app.search(this.value)
            })
        },
        render: function () {
            app.html.display.innerHTML = '';
            app.data.forEach(function (item) {
                app.html.display.innerHTML += `
                <div class="item">
                   <div class="title">${item.title}</div>
                   <div class="description">${item.description}</div>
                </div>
             `;
            });
            app.html.items = document.querySelectorAll('.item')
        },
        search: function (term) {
            var count = app.data.length;
            app.data.forEach(function (item, index) {
                var html = app.html.items[index];
                html.classList.remove('show');
                if (item.title.toLowerCase().indexOf(term.toLowerCase()) == -1) {
                    html.classList.add('hide');
                    count--
                } else {
                    if (html.classList.contains('hide')) {
                        html.classList.remove('hide');
                        html.classList.add('show');
                    }
                }
            });
            app.html.count.innerHTML = count;
        }
    };

    app.init();
    setTimeout(function () {
        app.search('')
    }, 200)

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

快速预览：猛戳这里