I'd look at select2, of which there's an angularized widget in ui-bootstrap
I think. It was a lot of work to wrestle with to get it to do Just What I
Wanted, so I ended up writing my own.
It's not too bad (code for my tag selector below). All you really need is
some CSS to define an overlay div (we have serious z-index issues sometimes
I will say), and a service to get you the list of possible tags. Note in my
scope.$watch code I use my Tag service to query the value, which does a
thingy where it pokes the backend, gets a list of tags, and caches that
list for future reference, and returns a filtered list against the query.
This works for tags because there's not too many and they each have very
short names (relatively speaking), so it's not too expensive to run "get
all tags" against the backend and keep it in memory.
In a different, similar problem, I wanted to do a flyover listing all
people. This was harder - there's an order of magnitude more people than
tags, and each person is more expensive, as people have individual
visibility settings (tags are globally visible), more expensive avatars to
download and render, and so on. Therefore I ended up having a different,
similar approach to my person-selector, but with different query / filter
semantics. Plus, the user code doesn't allow you to just type in a
non-valid person and hit enter the way the tag selector would (the tag
selector lets you create a tag if it doesn't exist, not so the
user-selector).
Similarly, the "all conversations" selector had a flyover, autocomplete
kind of feel, but there's yet another order of magnitude (or three,
eventually) difference between the number of users and number of
conversations, so I had to do things differently again in how it renders
and queries.
So each directive ended up being a slightly different one, with tweaks here
and there.
e
The directive template:
<div>
<input type="text" ng-model="view.tagText"
ng-keydown="handleKeypress($event)" placeholder="add a tag...">
<div ng-if="view.possible.length > 0" class="select-hover">
<span style="font-size: .75em">SUGGESTED:</span>
<div ng-repeat="item in view.possible"
ng-click="clickValue(item)">{{item.tag}}</div>
</div>
</div>
The directive definition (pardon my coffeescript):
angular.module 'tagger', ['ng']
.directive 'tagger', (Tag)->
restrict: 'E'
scope:
onSelect: '&'
templateUrl: "components/tagger/tagger.html"
link: (scope, element, attrs)->
scope.view =
tagText: ''
possible: []
scope.$watch 'view.tagText', (newV)->
if newV.length >= 3
Tag.query newV
.then (vals)->
scope.view.possible = vals
else
scope.view.possible = []
scope.clickValue = (val)->
scope.onSelect({tag: val})
scope.view.tagText = ''
scope.view.possible = []
scope.handleKeypress = (ev)->
if ev.which == 13
ev.preventDefault()
new Tag({tag: scope.view.tagText}).$save().then (t)->
scope.onSelect({tag: t})
scope.view.tagText = ''
scope.view.possible = []
else if ev.which == 9
ev.preventDefault()
if scope.view.possible.length > 0
scope.view.tagText = scope.view.possible[0].tag
You'd use this like
<tagger on-select="document.addTag(tag)">
On Fri, Sep 26, 2014 at 10:46 AM, Ken Egervari <[email protected]>
wrote:
> In my application, I have a many needs for a multi-value autocomplete
> input widget that lets you specify a custom template for the dropdown.
>
> Examples:
>
> 1) The user can input multiple tags. When typing, the system will suggest
> tags already in the database. The dropdown will be like Stack Overflow,
> where it shows more than the tag's text - it might show how frequently it's
> used, etc.
>
> 2) The user can input multiple recipients when sending a message to other
> users. The dropdown will suggest users that they can send the message to as
> they type. Each of these users will show their avatar, their full name, etc.
>
> 3) I want to add a user to a group. In this case, it works like above, but
> I only want them to add 1 user at a time (so I want to turn multi-value's
> off but still keep the same auto-complete dropdown functionality)
>
> I am having a hard time finding such a component that lets me do
> everything, and I fear that I may have to write my own from scratch. I
> really don't want to do that.
>
> Is there a component out there that will let me do all of these things? I
> want to use 1 component for all of my needs. Stack Overflow's Tag input is
> a great example of the level of power and control I would need, but I can't
> find anything that compares to this.
>
> I would really appreciate the assistance. Thanks
>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
