JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div class="search">
    <form>
        <input id="search-box" name="search-box-onsite" type="text" value="Search..">
        <button id="btnSearch"></button>
    </form>
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
.search {
    width: 130px;
    height: 56px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-right: 1px solid #3d3d3d;
    z-index: 9999;
    overflow: hidden;
}
form {
    width: 100%;
}
form input {
    width: 100%;
    float: left;
    height: 56px;
    padding-left: 20px;
    border: 0px;
    background: #2b2b2b;
    position: relative;
    outline: 0px;
    color: #8a8a8a;
    line-height: 56px;
    font-size: 14px;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
button {
    width: 50px;
    height: 56px;
    background: url("https://tomasha.s3.amazonaws.com/site/images/search.png") center center no-repeat;
    border: none;
    outline: none;
    float: right;
    margin-top: -56px;
    position: relative;
}

JavaScript

var searchbox = $("#search-box"),
    searchboxVal = searchbox.val(),
    searchboxDefault = "Search..";

searchbox.val(searchboxDefault).on({
    focus: function () {
        if (searchbox.val() == searchboxDefault) {
            searchbox.val("");
        }
    },
    blur: function () {
        if (searchbox.val() == "") {
            searchbox.val(searchboxDefault);
        }
    }
});
jQuery(document).keydown(function (e) {
    key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    // alert(key);
    if (key === 13 || key === 222) {
        e.preventDefault();
    }
});

function search() {
    var searchTerm = jQuery("#search-box").val();
    if (searchTerm.trim().toLowerCase() === '' || searchTerm.toLowerCase() === 'search..') {
        alert('Search box is empty');
        return false;
    } else {
        //alert(searchTerm);
        window.location.href = "/search-result?searchterm=" + searchTerm;
        //return;

    }
}
jQuery("#btnSearch").click(function () {
    return search();
});

$('.search form').on('submit', function (e) {
    e.preventDefault();
});

$('.search form').on('keyup', function (e) {
    key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
    if (key === 13 || key === 222) {
        return search();
    }
});