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.
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.
No comments:
Post a Comment