Interactive search (also called live search) has many benefits compared to traditional searching:
- Results are shown as you type.
- Results narrow the scope of your search query as you continue typing and eliminate irrelevant information to help you find the exact content you're looking for.
- If results become too narrow, remove characters to see a broader result.
This tutorial will demonstrate an interactive search in a classic report, where you get search results while you type. The report contains multiple columns and the text you type in the search box is searched across all columns automatically.
1.
Create a classic report page
using the following SQL query:
SELECT lpad(to_char(o.order_id),4,'0000')
order_number, o.order_id,
to_char(o.order_timestamp,'Month YYYY')
order_month,
trunc(o.order_timestamp) order_date,
o.user_name
sales_rep,
o.order_total,
c.cust_last_name||', '||c.cust_first_name customer_name,
(select count(*) from demo_order_items
oi
where oi.order_id = o.order_id and
oi.quantity != 0) order_items,
o.tags tags
FROM demo_orders o, demo_customers c
WHERE o.customer_id =
c.customer_id
2.
Set Static
ID of the classic report to myReport.
3.
Add a Text Field item as follows to the region. The item will be
used as a search box to receive the content you are looking for.
|
Property |
Value |
|
Name |
P25_SEARCH |
|
Type |
Text
Field |
|
Label |
Address |
|
Template |
Optional
Floating |
|
Icon |
fa-search |
|
Value Placeholder |
Enter
text to search for |
4.
Click the root node of the page
and enter the following JavaScript code for the Function
and Global Variable Declaration attribute:
$(document).ready(function(){
$("#P25_SEARCH").on("keyup",
function() {
var value =
$(this).val().toLowerCase();
$("#myReport tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Save and run
the page. Type june in the search
box. As you type this text, the classic report gets filtered to narrow the
result and shows the content containing june. Type in some other text and watch
the content filtration.
For Visual Instruction Watch This Video
