JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
     <h2>XSS Challenge</h2>

</div>
<div id="Browser">
    <div id="Toolbar" class="col-lg-12 clearfix">
        <div class="input-group">
            <input id="LocationBar" type="text" class="form-control" placeholder="URL" /> <span class="input-group-btn">
                <button id="GoBtn" class="btn btn-primary" type="button">Go</button>
            </span>

        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">Example | Search</div>
        <div id="page" class="panel-body">
            <div class="page-header">
                 <h2>Search <small id="SearchTerms">find what you need</small></h2>

            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <input id="Query" type="text" class="form-control" placeholder="Search for..."></input> <span class="input-group-btn">
        <button id="SearchBtn" class="btn btn-success" type="button">search</button>
      </span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

#Browser {
    border:1px solid #ddd;
    padding:2px;
    margin:10px;
    border-radius:5px;
    min-height:500px;
    background-color:lightgray;
}
#page {
    margin: 15px 5px;
    border:1px solid lightgray;
    height:450px;
}
#Toolbar {
    padding:0;
    margin-bottom:5px;
}

JavaScript

var params = {};
var baseUrl = 'http://example.com/list';
setLoc();

$('#SearchBtn').click(function () {
    var query = $('#Query').val();
    params.q = query;
    console.log(params);
    setLoc();
    query = filter(query);
    $('#SearchTerms').html(query);
});

function filter(query) {

}

$('#GoBtn').click(function () {
    getParams();
    
    $('#Query').val(params.q);
    $('#SearchBtn').click();
});

$('#Query').keyup(function (event) {
    if (event.keyCode == 13) {
        $("#SearchBtn").click();
    }
});
$('#LocationBar').keyup(function (event) {
    if (event.keyCode == 13) {
        $("#GoBtn").click();
    }
});

function setLoc() {
    params = getParams();
    var url = baseUrl;
    if (params.length > 0) {
        url += '?';
        var count = 0;
        for (var key in params) {
            if (count++ > 0) url += '&';
            url += key + '=' + params[key];
        }
    }
    $('#LocationBar').val(url);
}

function getParams() {
    
    var count = baseUrl.length;
    var url = $('#LocationBar').val();

    var querystring = url.substring(count);
    
    // remove any preceding url and split
    querystring = querystring.substring(querystring.indexOf('?') + 1).split('&');
    if(!querystring){
    	params = {};
        return;
    }
        console.log(1111);
    	
    var _params = {}, pair, d = decodeURIComponent;
    // march and parse
    for (var i = querystring.length - 1; i >= 0; i--) {
        pair = querystring[i].split('=');
        _params[d(pair[0])] = d(pair[1]);
    }    
    params = _params ? _params : {};
}