I am new to the world of javascript and recently downloaded code for an autocompleter feature in search boxes, but unfortunately, it's not functioning as I had hoped. The code snippet that I acquired is below:
Autocompleter.Local = new Class({
Extends: Autocompleter,
initialize: function (element, tokens, options) {
this.parent(element, options);
console.log(tokens); // Added this line
this.tokens = tokens;
},
query: function () {
console.log(this.tokens); // Also added this line
this.update(this.filter());
}
});
To utilize this code, I carry out the following steps:
var Activities = ['aa', 'bb', 'cc', 'abcd'];
function InitializePage() {
new Autocompleter.Local('txtSearch', Activities, {
'minLength': 1,
'overflow': false,
'selectMode': 'type-ahead'
});
}
window.addEvent('domready', function () {
InitializePage();
});
The tokens parameter within the initialize function represents an array containing all the possible suggestions for the autocompleter. The filter() function sifts through these suggestions to display only relevant ones to the user. My objective is to modify the tokens array periodically so that different suggestions are presented to the user.
In attempting to achieve this, I utilized the following code:
new Request.JSON({ method: 'get', url: 'handler/GetActivities.ashx', autoCancel: true, urlEncoded: false, secure: false,
headers: { "Content-type": "application/json" },
onSuccess: function (_json, _jsonText) {
Activities = _json;
}
}).send();
After confirming that the Activities variable was indeed updated by this request, I noticed that the tokens variable inside the autocompleter class continued to hold the original initialized array. My question now is how do I ensure that the tokens variable reflects the same data as the activities variable?