Add Search Option On Navigation Bar Oracle APEX

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.
  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.
<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>

  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
  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);});

  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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *