Saturday 23 January 2016

Tabular Form Text with MultiSelect Option

Step 1:
Create a tabular form. 
Step 2:
In Page Header add the JQuery Library File.
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

Step 3:
Create the text field to store the list of values with Comma Separated Values.
Step 4: 
In Source Type, Select SQL Query(Return Single Value) 
Example:
SELECT LISTAGG(job, ', ') WITHIN GROUP (ORDER BY job) "job"
FROM mul_sel;
Step 5:
In Dynamic Action, “OnClick” of the Text Item, Use the Below Java Script Code for the Performing the Auto Complete and Multi Selection.
Code:
  function split( val ) {
   return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
var availableTags;
var a = this.triggeringElement.id;
var b = "#" + a; 
//alert(b);
 $(b).bind( "keydown", function( event ) {
    var c = $("#P40_VALUES").val();
var temp = new Array();
temp = c.split(",");
      availableTags = temp;
       // alert("Inside"+b);
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $(this).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
            //alert("Condition Satisfied :Stage:1");
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
           //console.log(terms);  
          // alert(terms);
          // remove the current input
             terms.pop();
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( "," );
          return false;
        }
      });
   

No comments:

Post a Comment