madcapnmckay/Knockout-UI — Issue #5: Template menu for autocomplete
Author: metaman
Created: 2012-03-08 16:24:25+00:00
State: open

Really like the work you have done! Have you got any suggestions as to which is the best approach to use knockout templating to template the menu (and items) for the autocomplete box?

I've managed to do it in javascript by using the jquery autocomplete _renderMenu method (similar to how you did renderItem) however it means that we put more html in our javascript than we would like. Would like to put our template into the html and get the autocomplete binding to override the renderMenu and apply the template

'''html
var countriesViewModel = function() {
this.source = [{label:'France', value:{name:'France',region:'EU'}},{label:UK', value:{name:UK',region:'EU'}},{label:'China', value:{name:'China',region:'Asia'}},{label:'Japan', value:{name:'Japan',region:'Asia'}}];
this.renderMenu = function(ul, items) {
ul.append('
EU Countries
');
var euCountries = items.filter(function() {....});
$.each(euCountries, function(index,item){
ul.append('
' + item.value.name + '
');
});
ul.append('
Asian Countries
');
var asianCountries = items.filter(function() {....});
$.each(asianCountries, function(index,item){
ul.append('
' + item.value.name + '
');
});
}
this.autocompleteConfig = function() {
return this;
}.bind(this);
};
'''
Cheers!