I have need to create kendo auto completes dynamically, where each one could potentially have thousands of records... Thus, I am wanting to call my controller, get data from a Salesforce database based on the current search, then reset the dataSource of the auto complete with returned data in the filtering event.
My code is:
if(fieldMap[i].fieldType == 'REFERENCE'){
extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div><div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">';
dynamicComponent = '<select id="'+fieldMap[i].fieldName+'Input" type="text" data-role="dropdownlist" style="width: 150px">';
optString = '';
for(var k = 0; k < fieldMap[i].referenceList.length; k++){
if(k == 0){
optString += '<option value="'+fieldMap[i].referenceList[k]+'" selected>'+fieldMap[i].referenceList[k]+'</option>';
} else{
optString += '<option value="'+fieldMap[i].referenceList[k]+'">'+fieldMap[i].referenceList[k]+'</option>';
}
}
optString += '</select>';
var inputString = '<input data-role="autocomplete" data-filter="contains" data-source="testData" id="'+fieldMap[i].fieldName+'SearchInput"/></div>';
dynamicComponent = dynamicComponent + optString + inputString;
}
extraString += dynamicComponent;
//editorTemplateString += extraString;
$('#editor_template').append(extraString);
extraString = '';
dynamicComponent = '';
if(fieldMap[i].fieldType == 'REFERENCE'){
kendo.init($('#'+fieldMap[i].fieldName+'SearchInput'));
var autoComp = $('#'+fieldMap[i].fieldName+'SearchInput').data('kendoAutoComplete');
autoComp.bind('filtering', autoComplete_filter);
console.log($('#'+fieldMap[i].fieldName+'SearchInput').data('kendoAutoComplete'));
}
}
which seemingly seems to successfully create kendo auto complete widgets with dummy data in testData right now. However, autoComplete_filter method is never being called when I type in the box. That method is simply:
function autoComplete_filter(e){
console.log(e);
}
right now... but nothing prints out in the console when I type in the auto complete box.
How do I set the filtering event on dynamically created auto completes like this? Also, how can I set the minLength to three? It starts filtering after the first character entered and I only want it to start after 3 or more are entered.
Thank you for any help.