JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="Type the desired page" id="search"  class="txtfield"  onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}" autocomplete="off"/>
<input type="button" class="btn"/>

<div class="clear"></div>
        
<div id="content">
    <div id="home">home
        <br /><i>home content</i>
    </div>
    <div id="about">about
        <br /><i>about content</i>
    </div>
    <div id="portfolio">portfolio
        <br /><i>portfolio content</i>
    </div>
    <div id="hire">hire me
        <br /><i>hire me content</i>
    </div>
    <div id="contact">contact
        <br /><i>contact content</i>
    </div>
</div>

CSS

input {
	border: 1px solid #2E9AFE;
	position:relative;
    margin:0;
    padding:0;
    float:left;
}
input.txtfield {
	color: #999;
	font-family: Calibri;
	font-size:18px;
	height: 50px;
	line-height: 25px;
	width: 280px;
	padding: 0 0 0 5px;
	background:none;
}
input.btn{
    width:52px;
    height:52px;
    position:relative;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/1/15/Farm-Fresh_magnifier.png');
    background-color: #2E9AFE;
    background-repeat: no-repeat;
    cursor:pointer;
}
.clear{
    clear:both;
}
}

JavaScript

window.onload = function()
{
    document.getElementById('search').setAttribute('autocomplete', 'off');  // This is to prevent the default autocomplete.
}
// end

var substringMatcher = function (strs, q, cb) {
    return (function (q, cb, name) {
        var matches, substrRegex;
        // an array that will be populated with substring matches
        matches = [];
        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');
        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function (i, str) {
            $("#search").val("");
            if (substrRegex.test(str) || q.slice(0, 1) === str.slice(0, 1)) {
                // the typeahead jQuery plugin expects suggestions to a
                // JavaScript object, refer to typeahead docs for more info        
                matches.push(name(str));
            }
        });
        cb(matches);
    }(q, cb, function (n) {
        return {
            "content": n
        }
    }));
};

var _matches = $.map($("#content div"), function (v, k) {
    return [v.id]
});

var template = {
    "content": _matches
};
var search = $('#search').val().toLowerCase();
$("#content div:gt(0)").hide(0);
$('#search').focus().keyup(function (e) {
    var search = $(this);
    var _search = search.val();
    if (e.which === 13){
        show_page(_search);
    }
});

$('.btn').click(function(){
    show_page($('#search').val());
});

function show_page(_search) {
    substringMatcher(template.content, _search, function (d) {
            $("#" + d[0].content)
            .delay(500)
            .fadeIn(500)
            .siblings()
            .fadeOut(500);
            search.val("")
        })
}