Search Option In Navigation Bar by Oracle Apex

 HTML: 

<li class="t-NavigationBar-item #A02#"><input type="search" id="searchid" placeholder="Search You Product..." name="search"> <button id='searchbtid'type="submit"><i class="fa fa-search"></i></button> <a class="t-Button t-Button--icon t-Button--header t-Button--navBar" href="#LINK#">  <span class="t-Icon #ICON_CSS_CLASSES#"></span><span class="t-Button-label">#TEXT_ESC_SC#</span><span class="t-Button-badge">#A01#</span> </a></li>

CSS:

<style>

#searchid{ height: 30px;

width: 500px;

}

#searchbtid{

    margin-right: 200px;

    height: 30px;

    padding-top: 2px;

    padding-left: 9px;

}

</style>

Java Script:

$('#searchid').keyup(function() {var searchVal = document.getElementById("searchid").value ;

$s("P0_SEARCH", searchVal);});