Hello All,
I have posted multiple article on Siebel Auto Suggestion, where we get the Suggested results based on the keyword typed.
In this post i will share how we can expose Siebel REST API url to be used as Auto Suggestion result fetching.
below Video shows, where a Front End User is entering some Product Name and Siebel API sends the request to Siebel and displays the Siebel Products results.
Siebel Structure:
The Rest API of Siebel has the features where a search expression can be set and we can return a particular field or set of field.
https://<<hosturl>>/siebel/v1.0/data/Internal Product/Internal Product/?searchspec=([Name] LIKE '"+a+"*')&fields=Name", false); // `false` makes the request synchronous
here, a is the value that will be entered in text box and passed to Siebel REST API url.
Pretty Simple :-), yet effective
Sample HTML Form
I have posted multiple article on Siebel Auto Suggestion, where we get the Suggested results based on the keyword typed.
In this post i will share how we can expose Siebel REST API url to be used as Auto Suggestion result fetching.
below Video shows, where a Front End User is entering some Product Name and Siebel API sends the request to Siebel and displays the Siebel Products results.
Siebel Structure:
The Rest API of Siebel has the features where a search expression can be set and we can return a particular field or set of field.
https://<<hosturl>>/siebel/v1.0/data/Internal Product/Internal Product/?searchspec=([Name] LIKE '"+a+"*')&fields=Name", false); // `false` makes the request synchronous
here, a is the value that will be entered in text box and passed to Siebel REST API url.
Pretty Simple :-), yet effective
Sample HTML Form
| <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body style="background: beige;"> <div class="container"> <div id="emailcontainer"> <label>Search a product here by entering the keywords</label> <label for="emailaddress">Product Name</label> <input type="" class="dataholder ui-autocomplete-input" id="emailaddress" name="emailaddress" placeholder="Email Address.." autocomplete="off"> </div> </div> <script> $('#emailaddress').autocomplete({ source: function( rqst, response ) { var txt='',tags=''; var request = new XMLHttpRequest(); var a = $('#emailaddress').val(); request.open('GET', "https://<<youraddresshere>>/siebel/v1.0/data/Internal Product/Internal Product/?searchspec=([Name] LIKE '"+a+"*')&fields=Name", false); // `false` makes the request synchronous request.send(null); if (request.status === 200) { var obj = JSON.parse(request.responseText); var Items = obj.items; var length = Items.length; a = new Array(); for (var i=0;i<length;i++) { a[i]= Items[i]['Name']; } } console.log(a); tags = a; var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( rqst.term ), "i" ); response( $.grep( tags, function( item ){ return matcher.test( item ); }) ); } }); </script> </body> </html> |
This can also be implemented in Siebel UI as well, will share the details of that in upcoming posts.
