Hi Arun,
Thank you for your quick reply, with a working example. Unfortunately, I am still having the same issue as before, but I will be as detailed as possible.
Purpose:
When a user types into the autoCompleteBox they are expecting to see all possible matches to their text. What is currently happening on the backend is that onChange there is an API call which populates '$scope.DeviceData', which is the 'e-datasource' for the autoCompleteBox.
Problem:
When searching for data, the $scope.DeviceData is being populated correctly, but the dropdown for the autoComplete flashes then disappears almost immediately. In other words, instead of waiting the 'e-delaySuggestionTimeout' time, the dropdown appears, then disappears, not showing any of the data that was just retrieved. I believe that this has something to do with the API call being asynchronous and the dropdown box is closing when receiving new data in the $scope.DeviceData. As of right now, the dropdown for the autoComplete flashes, then disappears. If I reopen the dropdown by clicking the search icon, or using my onFocus event, then the dropdown stays open and data shown is correct.
---HTML---
<input id="autoCompleteBox" type="text" ej-autocomplete e-width="100%" e-datasource="DeviceData"
e-showpopupbutton="true" e-select="autoCompleteOnSelect" e-change="autoCompleteOnChange"
e-fields-key="multicolumnkey" e-fields-text="multicolumntext" e-highlightserach="true"
e-multicolumnsettings="multicolumncolset" e-focusIn="onFocus"
e-delaySuggestionTimeout="2000" e-placeholder="Search"
e-minCharacter="3"/>
---JavaScript---
$scope.autoCompleteOnSelect = function (args) {
if (args.item !== undefined) {
addSelectedDevice(args.item);
$("#autoCompleteBox").ejAutocomplete("clearText");
}
}
$scope.autoCompleteOnChange = function (args) {
if (args.value.length >= 3) {
querySearch(args.value);
}
}
$scope.onFocus = function (args) {
$("#autoCompleteBox").ejAutocomplete("open");
}
//Call works as expected and returns correct results
function querySearch (queryString) {
$http({
method: 'GET',
url: MY_URL_TO_API,
headers: {
'apiKey': 'XXXX'
}
}).then(function successCallback(response) {
$scope.DeviceData = response.data.value; //Set $scope.DeviceData to what data comes back
},
function errorCallback(response) {
alert("There was an error in HTTP GET")
});
}
var addSelectedDevice = function (device) {
//Add device to separate list (works as expected)
}
