Add Search Option On Nav Bar Oracle APEX

preview

How to Add Search Option On Nav Bar Oracle APEX

In Some of the cases wee need to add search field of top of the navigation bar but directly we can’t add it so there is the solution if we edit tamplate so lets start and see how we can get.

  1. First go to the Share Components»Templates and copy the navigation bar tamplate and give the another name.

preview

  1. Now Open the New navigation bar which you have created and go to the List Template Noncurrent with Sublist Items (First) and paste the below code as per screenshot.

preview

<li class="t-NavigationBar-item #A02#">
<input type="search" id="nav_id" placeholder="Search You Records..." name="search"> 
<button id='navbtnid'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>

preview

  1. Now create a page with classic report/ Interactive Report using below query.
select 
    EMPNO,
    ENAME,
    MGR,
    JOB,
    SAL
FROM
    EMP where
UPPER(ename) like nvl(UPPER(:P11_SEARCH),'%')
    ORDER BY EMPNO DESC

preview

  1. Copy and paste below jquery code Execute when Page Loads section.
$('#nav_id').keyup(function() 
{
apex.item( "P11_SEARCH" ).setValue(apex.item( "nav_id" ).getValue())
});
//or please use one of this
$('#nav_id').keyup(function() 
{
var searchVal = document.getElementById("nav_id").value ;
$s("P11_SEARCH", searchVal);});

preview

  1. In case if you want to move search option in center then use below css.
<style>
#nav_id{ height: 30px;

width: 550px;

}

#navbtnid{

    margin-right: 240px;

    height: 30px;

    padding-top: 2px;

    padding-left: 9px;

}</style>

Demo

You might also like:


comments powered by Disqus