If i correctly understood you, this what you want to do :
1. You want query your api (provided by cms) and add the response( list of products data) into a javascript variable.
2. Whenever user types something you want to do auto compelete.
This is just a template code, please change it as per your need.
As I don't know anything about your cms api, I am assuming a lot of things here.. If i am not correct, provide more info:
1) Your CMS API location
-- Assuming that your CMS api is a restful service that prvoides JSON data as response. I.e. The CMS API will look like this
http://www.timikatiramri.com/cmsapi (this is the api location which will provide the data in an array format, again, these are assumptions, if its not the case provide more info on it)
- the above URL returns array data. i.e the response data would be
[
"Product Name A",
"Product Name B",
"Product Name c",
"Product Name D"
]
I am assuming that you know how to use jquery ajax method and autcomplete property from jquery ui. If not then let us know.
<input id="products" type="text"/>
<script>
$(function(){
//variable to store product data
var myProductData = "";
//call the api method via ajax
$.ajax({
url : 'http://www.timikatiramri.com/cmsapi',
success:function(responsedata,status,xhr){
//assign the response data into a javascript variable
myProductData = responsedata;
}});
//now bind our input text to handle autocompelete
$('#products').autocomplete({source:myProductData });
});
</script>
That's all you need if you api is returning data in array format. if not then you need to modify it as per your need. As I said I don't know how data is coming from api, this is the best I Can came with. Please provide more info and we will let you know more about it.
HAPPY CODING :)
.png)
