Autocomplete with categories, allow multiple values, split by ','

Autocomplete with categories, allow multiple values, split by ','

I'm interrested in merging both "multiple" and categories example from the documentation but the approach of handling data in both example is different and i'm strugling a lot for days now trying different possibilities.

First my data is fetch from Postgres DB and stored into the variable data with:

var data = <?php echo json_encode($liste_terri); ?>;

The data is formatted with:

    while($row = pg_fetch_array($result_t))
    {
        $liste_terri[] = array(
            'value' => $row['nom_territoire'],
            'category' => $row['typ_territoire']
        );
    }   

and render well, splitted in each categories, but I cannot manage to find how to use this:

    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
 
    $( "#tags" )
      // don't navigate away from the field on tab when selecting an item
      .on( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .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 );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  } );


and incorporate within the function.
Is it on the last bit of the function that I should handle the multiple values?

    $( "#tags" ).catcomplete({
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            data, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
    });

I hope I managed to explain well my problem, and I'm available for any further informations needed in order to solve together this problem.

Thank you a lot.