CODEWITHSUNDEEP
jqueryautocompletetagstag-it
Jack
Jack

Reputation: 203

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

I like jQuery's Tag-It plugin, but if I have it set to autocomplete, it doesn't always work the way I want it to.

Here's an example.

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

If I type in "Apple" it doesn't suggest Pink Lady, Granny Smith or Golden Delicious. It only suggests Apple. Is there a way that I can alter this so that it also scans tags containing Apple but that don't start with Apple?

Upvotes: 4

Views: 4040

Answers (3)

jamesmortensen
jamesmortensen

Reputation: 34038

I was facing the same problem, so I used @Ravindra's tip (+1 BTW) to see if I could reverse engineer the plug-in and figure out what the tagSource function is expected to return.

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

Here is the default tagSource function, which uses indexOf to determine if the text typed so far matches the beginning of a tag in the availableTags array:

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 pasted it into the .tagit function so it was included as one of the parameters passed into the jQuery tagit initialization function. I then modified it to use the match method, which uses pattern matching to return the portion of the string matching the pattern. If the match returns null, don't show it in the list. If it returns anything else, show the tag in the list:

Modified function passed in as 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()));
    }
});

Upvotes: 6

Ravindra Gullapalli
Ravindra Gullapalli

Reputation: 9158

It is working for me with tagSource property of Tag-it. I am using http://aehlke.github.com/tag-it/

Upvotes: 4

Semyazas
Semyazas

Reputation: 2101

Tag-It inherits autocomplete from the wai-aria implementation. This only knows three states by default:

None - no completion at all
Inline - Starting with...
List - All available

So without expanding tag-it to use a different approach to autocompletion, this is not possible.

Please see here for more information on WAI-ARIA:

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

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

Upvotes: 0

Related Questions