In this Oracle APEX Tutorial, We will explore about the Instant Search with Classic Report in Oracle APEX 21.1.
We will add Instant Search or Live Search Functionality with Classic Report in Oracle APEX. With the help of adding instant search functionality, we will control user minimum click or waiting for the result.
To get started, we will build search UI with Classic Report and our goal is add instant search or Live Search Functionality. Now we will share step by step process with all necessary code which will used for this implementation.
Step 1:- Create a Classic Report with one text field type page item in your page. The Following screenshot will help for better understanding.
Step 2:- Go to the Classic Report attributes section and find appearance CSS classes then add SEARCH_RECORD class there. The Following screenshot will help for the better understanding.
Step 3:- Go to the page (execute when page loads) section and put the following JavaScript code.
$(document).ready(function(){ //change with your page item name $('#P6_MYINPUT').keyup(function(){ var search = $(this).val(); $('.SEARCH_RECORD tbody tr').hide(); var len = $('.SEARCH_RECORD tbody tr td:contains("'+search+'")').length; if(len > 0){ $('.SEARCH_RECORD tbody tr td:contains("'+search+'")').each(function(){ $(this).closest('tr').show(); }); } }); }); $.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; });
That's all for today, I think(Instant Search with Classic Report in Oracle APEX 21.1) post will helpful for you. If you like the post then share your view in the comment box.
We have already upload a video on this topic if you want to watch that video then click here. Please support our youtube channel so we will upload more Oracle APEX Tutorial videos and blog.
1 Comments
fine
ReplyDeleteIf you have any doubts, Please let me know