Custom template support for autocomplete

[mbenford]

The autocomplete directive should have support for custom templates so additional information could be displayed instead of just a list of strings.

[daviddutch]

Wasn't this done here: #132

This is similar to what is done in AngularStrap (https://github.com/mgcrea/angular-strap) and it works very well.

I would need this feature, are you thinking of adding it?

Thanks

[mbenford]

#132 is about a different thing. This one is about providing a general, extensible way of customizing the autocomplete template. I'm definitely going to implement it at some point, but I can't promise any ETA right now.

[weisk]

You can just override the $templateCache :D

[nbauernfeind]

I was able to get away with what I wanted by modifying the directive to add a new parameter, 'formatSuggestion'.

        scope: { source: '&', formatSuggestion: '&' },

Added the original implementation as a local var.

            defaultHighlight = function(item, query) {
                console.log(item);
                var text = getDisplayText(item.$item);
                text = encodeHTML(text);
                if (options.highlightMatchedText) {
                    text = replaceAll(text, encodeHTML(query), '<em>$&</em>');
                }
                return text;
            };

Then replaced the original highlight method to invoke my parameter.

            scope.highlight = function(item) {
                var html = scope.formatSuggestion({$item: item, $query: suggestionList.query});
                if (html === undefined) {
                    html = defaultHighlight({$item: item, $query: suggestionList.query});
                }
                return $sce.trustAsHtml(html);
            };

There's probably a better way to do this (and certainly you could do this more cleanly), but this allowed me to have a method to format each suggestion. It somehow lost me the ability to select the highlighted entry on-enter, but on-tab still works.

[inguansoft]

Is there any progress on this feature? I would like to help to make it happen.

I think the template needs to follow the way angular handles templates: 'templateUrl'

and this should be extended not just to autocomplete lists but to the tags themselves.

[mbenford]

@inguansoft As a matter of fact, I'm working on this feature right now. I'm using the ngInclude directive in order to load the custom template. Take a look at this prototype I created to understand the solution better.

And I agree with you that the tags should also support a custom template. But one step at a time. ;)

[inguansoft]

neat, take a look at this PR, The functionality is working but I need to fix the unit test and remove the build files. I wanted to share with you the progress so that I dint invest too much time on showing the status. I'm working on this because We needed very badly for a product We are building.

PR:
#386

[mbenford]

@inguansoft I took a look at your PR and I guess it resembles my own implementation at some points.

I've pushed my changes to a remote branch so you can check them out. I appreciate if you could share your feedback. It's not final yet, but it's very close. And don't mind the commit messages; I'll squash them into one later.

Here's how to use the new feature:

<tags-input ng-model="tags">
  <auto-complete source="loadSuggestions($query)" 
                 template="template-name-or-url"></auto-complete>
</tags-input>

The template option can be set to either a url or an id pointing to a script tag. Here's an example:

<script type="text/ng-template" id="template1">
...
</script>

The template will be bound to an isolate scope containing the following:

• data: The match returned by the source option.
• highlight: A function that highlights the matched text. You need to provide it with some text.
• getDisplayText: A function that returns the text to be displayed according to the display-property option.

The test-page.html file has been updated to use all of the above, if you need a working example.

[rajesh-rns]

@mbenford - I also need this functionality of customizing the template for one of the projects I am working on. Need to show two separate lists one below the other (normal options and the favorite options) separated by a divider and allow the user to select from any of the two. Would you be ready with the final version today. I have to start working on this tomorrow so that would help :-)!

[mbenford]

@rajesh-rns Probably not. :(

It's worth saying that my implementation allows you to customize each element of the autocomplete list., not the entire thing. It will be tricky to do what you want, if at all possible. I guess what you need is to group elements, but that feature isn't available yet (it's documented, though).

[inguansoft]

neat, I'll have a look at it, We would love to keep in line with the core library. The PR I got had the wiring for the tag as well + adding a regexp checker for items not coming from autocomplete, I'll try to organize them together in a separate PR. Huge thanks for sharing such amazing library!

[ronaldohoch]

Thanks for this awesome feature, but how auto-complete works in this case?

For example, i have this array:

[ { "group": "aaa", "id": "-1", "name": "Adquiridos (Pagos)" }, { "group": "bbb", "id": "-2", "name": "Captados (Concluídos)" }]

So, how can I put the "group" property before all of same type, like this other plugin(image below)