Sunday, September 4, 2011

Jquery AutoComplete for APEX 3.2

There are 4 steps involved.

1) Create region and textbox.
2) Download Jquery Plugin and upload it.
3) Enter the Javascript in HTML Header.
4) Make an application process. 

In Detail : 

1) Create region and textbox.

Create a Html region in a page. I have created as " Testing Autocomplete "
Add a new textfield for the Html region. I have created as "P71_USER_MAILID".
This is where autocomplete will be implemented.

2) Download Jquery Plugin and upload it.

I have downloaded jquery-ui-1.8.16.custom.zip.
I have uploaded 3 files : jquery-1.6.2.min.js, jquery-ui-1.8.16.custom.min.js and jquery-ui-1.8.16.custom.css

3) Enter the Javascript in HTML Header.

Enter the following code in HTML Header :

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="#WORKSPACE_IMAGES#jquery-ui-1.8.16.custom.css" />

<script type="text/javascript">

$(document).ready(function(){

   var ajaxRequest = new htmldb_Get(null,&APP_ID.,'APPLICATION_PROCESS=getList',0);
   var ajaxResult = ajaxRequest.get();
   var newList=ajaxResult.split(",");
   $( "#P71_USER_MAILID" ).autocomplete({                       
            source: newList
        });
 });

</script>

4) Make an application process.

Create an application process with the same name as given in Javascript.
I have created with name "getList".
Make the Process point as On Demand : Run this application when requested by a page process.

  Declare
  lv_List varchar2(2000) := '';
  Begin
  Begin
    for i in (select USER_EMAILID from USER_TBL) loop
      lv_List := lv_List || i.USER_EMAILID;
       lv_List := lv_List ||', ';
    end loop;
    exception when no_data_found then null;
  End;
  htp.prn(lv_List);
End;

--------------------------------------------------------------------------------------------  -------------------------------------------------------------------------------------------- 

2 comments:

  1. HI, WE CAN'T FIND jquery-ui-1.8.16.custom.zip. We try for our old apex 3.2 APPS BUT YOUR CODE IS NOT WORK PLEASE HELP

    ReplyDelete