Geek Answers Handbook

How can I improve jQuery "Tag-It" autocomplete?

I like the jQuery Tag-It plugin, but if I have it set to autocomplete, it does not always work the way I want.

Here is an example.

My autocomplete array consists of “Pink Lady Apple,” “Granny Smith Apple,” “Golden Delicious Apple,” and “Apple.”

If I type "Apple", he does not offer Pink Lady, Granny Smith or Golden Delicious. It only offers Apple. Is there a way to change this so that it also looks at tags that contain Apple but that don't start with Apple?

+4
source share
3 answers

I ran into the same problem, so I used the @Ravindra (+1 BTW) hint to see if I can reverse engineer the plug-in and figure out how the tagSource function is expected to return.

The tagSource function returns a boolean value. True is returned if the tag in the array of available tags is displayed in the autocomplete list. False is returned to indicate that the tag should not be displayed.

Here is the default tagSource function that uses indexOf to determine if the text typed so far matches the beginning of the tag in the array of available tags:

Original, default function:

tagSource: function(search, showChoices) { var filter = search.term.toLowerCase(); var choices = $.grep(this.options.availableTags, function(element) { // Only match autocomplete options that begin with the search term. // (Case insensitive.) return (element.toLowerCase().indexOf(filter) === 0); }); showChoices(this._subtractArray(choices, this.assignedTags())); }

I copied the function and embedded it in a .tagit function, so it was included as one of the parameters passed to the jQuery tag tag initialization function. Then I modified it to use a matching method that uses pattern matching to return the portion of the string matching the pattern. If the match returns null, do not show it in the list. If it returns anything else, show the tag in the list:

A modified function passed as an argument:

 tagSource: function(search, showChoices) { var filter = search.term.toLowerCase(); var choices = $.grep(this.options.availableTags, function(element) { // Only match autocomplete options that begin with the search term. // (Case insensitive.) //return (element.toLowerCase().indexOf(filter) === 0); console.info(element.toLowerCase().match(filter) + " : " + element + " : " + filter); return (element.toLowerCase().match(filter) !== null); }); showChoices(this._subtractArray(choices, this.assignedTags())); }

Example:

 $('#tagged').tagit({ onTagRemoved: function() { alert("Removed tag"); }, availableTags: [ "one" , "two one" , "three" , "four" , "five" ], // override function to modify autocomplete behavior tagSource: function(search, showChoices) { var filter = search.term.toLowerCase(); var choices = $.grep(this.options.availableTags, function(element) { // Only match autocomplete options that begin with the search term. // (Case insensitive.) //return (element.toLowerCase().indexOf(filter) === 0); console.info(element.toLowerCase().match(filter) + " : " + element + " : " + filter); return (element.toLowerCase().match(filter) !== null); }); showChoices(this._subtractArray(choices, this.assignedTags())); } });
+6
source

It works for me with the tag property Tag-it . I am using http://aehlke.github.com/tag-it/

+4
source

Tag - it inherits autocomplete from the wai-aria implementation. By default, only three states are known:

No - not completed at all Inline - Starting from ...
List - All Available

Thus, without a tag extension, to use a different approach to autocomplete, this is not possible.

Learn more about WAI-ARIA here:

http://www.w3.org/WAI/intro/aria

http://test.cita.illinois.edu/aria/

0
source

More articles:


All Articles