Template menu for autocomplete

[metaman]

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

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('<li>EU Countries</li>');
                      var euCountries = items.filter(function() {....});
                      $.each(euCountries, function(index,item){
                       ul.append('<li>' + item.value.name + '</li>');
                       });
                      ul.append('<li>Asian Countries</li>');
                      var asianCountries = items.filter(function() {....});
                      $.each(asianCountries, function(index,item){
                       ul.append('<li>' + item.value.name + '</li>');
                       });
                       }
            this.autocompleteConfig = function() {
                return this;
            }.bind(this);
        };

Cheers!

[madcapnmckay]

Hi,

I have just started a rewrite of all the components in the library and one of the top goals is templates being made configurable. I am using a custom template source to allow them to be stored in memory as strings instead of in the dom. This same mechanism could be adopted to returns the strings necessary for your _renderMenu method. When you have a custom template source you can query a template name and receive a string in return.

http://www.knockmeout.net/2011/10/ko-13-preview-part-3-template-sources.html

That's all I can think of off the top of my head. I'll let you know if I think of anything else.

keep me posted.

Cheers,

Ian