Хотите создать - после нажатия кнопки поиска показать результат поиска - PullRequest
0 голосов
/ 29 августа 2018

Теперь это как живой поисковый фильтр. Но я хочу создать поисковый фильтр с кнопкой поиска в стороне от формы ввода поиска, которая после нажатия кнопки поиска показывает результат для того, что я ищу.

Вот так, я хочу создать активную форму поиска

Как добавить кнопку поиска с формой ввода поиска?

HTML код:

(function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter">

    <table class="order-table table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@gmail.com</td>
                <td>0123456789</td>
                <td>99</td>
            </tr>
            <tr>
                <td>Jane Vanda</td>
                <td>jane@vanda.org</td>
                <td>9876543210</td>
                <td>349</td>
            </tr>
            <tr>
                <td>Alferd Penyworth</td>
                <td>alfred@batman.com</td>
                <td>6754328901</td>
                <td>199</td>
            </tr>
        </tbody>
    </table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...