Auto-Complete using JQuery in heritage Coach

This Post will illustrate an example on how to implement auto-complete operation over a text-box in IBM BPM  Heritage coach (Not the new coach which comes in 8.x versions) using an Ajax service.

Steps for implementation:
Step1:
Create an Ajax Service which will takes String value as input (variable name: text) and list of String as output and build the require logic inside the service. In this example, let create a service which get the users from LSW_USR table based on the input string value. Input and output structure is as shown in the below figure.

Step2:

Create human service with a heritage coach, with one input text field (control Id: InputText0). And add a Custom Html and inlcude the below script.

*****************************************************************

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

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

 <script> 

 var availableTags;

 function AjaxRetrieveUsers(inp){

 var updateHTML = function(data) {

   availableTags = data['results']; 

  };

  var serviceInputs = "<input name='elementValue'>"

    + "<variable name='text' type='String'>" + inp + "</variable>"

    + "</input>";

  tw.coach.callService('GetUsers', serviceInputs , updateHTML);

 }

 $('#InputText0').bind('keyup', function() { 

      AjaxRetrieveUsers(document.getElementById('InputText0').value)

       $( "#InputText0" ).autocomplete({ 

                source: availableTags  

       }); 

       

    }); 

       

</script>

***********************************************************

Our Human Coach with Auto Complete is ready.

Step 3:

Run the Service. You can see the screen as below.