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;

        }

      });