Cascading - Text With Auto-Complete in Tabular Form

Text with Auto Complete is  most common requirement and can be done normally for item level. But coming to tabular form it seems to be tedious due to dynamic id’s and queries. Also Cascading 

process inclusion adds a valuable requirement.

Following are steps involved Cascading - Text with Auto-complete:

Step : 1: For Cascading I have to get source id and value, so I have used

               dynamic action,

Event                : Click

Selection Type : JQuery Selector

                            Value : [name = f03]   //Source Id

Action               : Javascript Code

Code                 :   var source_element = this.triggeringElement.id; //gets source id 

                              var source_value = $("#"+source_element).val(); 

                                                        // gets source value

                              $("#P41_MAP_TYPE").val(source_value);

                                                // Assign to item

Step:2: List of Values to be displayed in Text with Auto-complete can be       listed as static or it can also be fetched from query. So I have added   one more true action to add query and assigned query result to item, which act as  result set for auto-complete.

       Action              : Execute PL/SQL Code

       PL/SQL Code : DECLARE

                     lv_tag_asset   VARCHAR2 (32767);

                     lv_temp VARCHAR2(1000);

                     BEGIN

                          FOR i IN (SELECT tag_code tag_asset

                            FROM doy_com_tag_master

                            WHERE NVL (status, 'Y') = 'Y'

                            AND :P41_MAP_TYPE = 'TAG'

                            AND company_id = :f121_company_id

                            AND location_id = :f121_location_id

                         UNION

                              SELECT serial_number tag_asset

                              FROM doy_com_item_transaction

                              WHERE NVL (status, 'Y') = 'Y'

                               AND :P41_MAP_TYPE = 'ASSET'

                               AND company_id = :f121_company_id

                               AND location_id = :f121_location_id)

                  LOOP

                      lv_tag_asset := lv_tag_asset || ','|| i.tag_asset;

                  END LOOP;

                      :P41_TAG_ASSET := lv_tag_asset;

                   END;

Page Items to Return : P41_TAG_ASSET

Step : 3 :  On resulting item key-down we need auto-complete list, So I have added      dynamic action on key-down of item,

Event                : Key Down

Selection Type : JQuery Selector

                             Value : [name = f05]   //Source Id

Action               : Javascript Code

Code                  :   var availableTags;

                               var temp = new Array();

                               var c = $("#P41_TAG_ASSET").val();

                               temp = c.split(",");

                               availableTags = temp; 

                               var id = this.triggeringElement.id;

                               $( "#"+id ).autocomplete({

                                 source: availableTags

                                          });

Event Scope    :   Dynamic

                  Static Container : #report_tab_form   

                                            // id of tabular form is tab_form

Step: 4        :   Jquery library has to be added in our header level , it is better to add      it in template level. 

               <script src="//code.jquery.com/jquery-1.10.2.js"></script>

                <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>