JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<div class="search">
    <input type="text" id="txt-search" placeholder="Search" />
    <button id="btn-search">Click</button>
    <input type="text" id="txt-search2" placeholder="Search" />
    <button id="btn-search2">Click</button>
</div>

JavaScript

(function (document, window) {

    'use strict';

    var search = {
        els: [{
            btnSearch: 'btn-search',
            txtSearch: 'txt-search'
        }, {
            btnSearch: 'btn-search2',
            txtSearch: 'txt-search2'
        }],

        init: function () {
            var i = 0,
                l = search.els.length;

            for (; i < l; i++) {
                var txtSearch = document.getElementById(search.els[i].txtSearch),
                    btnSearch = document.getElementById(search.els[i].btnSearch);

                if (txtSearch === null || btnSearch === null) {
                    continue;
                }

                if (window.attachEvent) {
                    txtSearch.attachEvent('onkeydown', search.keySearch);
                    btnSearch.attachEvent('onmousedown', search.search);
                } else if (window.addEventListener) {
                    txtSearch.addEventListener('keypress', search.keySearch, false);
                    btnSearch.addEventListener('click', search.search, false);
                }
            }
        },

        search: function (e) {
            var el = e.target || e.srcElement;

            if (el.nodeName.toLowerCase() !== 'input') {
                while (el.nodeName.toLowerCase() !== 'input') {
                    el = el.previousSibling;
                }
            }

            var query = '/search/?q=' + encodeURIComponent(el.value);
            //window.location.href = query;

            console.log(query);
        },

        keySearch: function (e) {
            var keyCode = e.keyCode ? e.keyCode : e.which;

            if (keyCode === 13) {
                search.search(e);
            }
        }
    };

    search.init();
})(document, window);