CODEWITHSUNDEEP
javascriptjqueryjsonjquery-textext
Austin Biggs
Austin Biggs

Reputation: 177

jQuery TextExt: Tags with custom data objects

I'm currently struggling with implementing a jQuery plugin to my site for tags (with custom data objects) with autocomplete. jQuery TextExt can be found here (http://textextjs.com/). I'm currently struggling with using custom data objects for each tag, which can only be chosen from what autocompletes. Based on this example (http://textextjs.com/manual/examples/tags-with-custom-data-objects.html) I'm trying to figure out how to return both "name" and "id" when a tag is chosen. Does anyone know how to achieve this or point me in the correct direction?

Perhaps the answer is somewhere in this example (http://textextjs.com/manual/examples/filter-with-suggestions.html)?

Here's what I have written, which isn't working (it only returns the name, I've tried adding 'item.id' to the functions but that didn't work for me either):

<script type="text/javascript">
jQuery(document).ready(function( $ ){
    jQuery('#textarea').textext({
        plugins: 'tags',
        items: [
            { name: 'PHP', id: '1' },
            { name: 'Closure', id: '2' },
            { name: 'Java', id: '3' }
        ],

        ext: {
            itemManager: {
                stringToItem: function(str)
                {
                    return { name: str };
                },

                itemToString: function(item)
                {
                    return item.name ;
                },

                compareItems: function(item1, item2)
                {
                    return item1.name == item2.name;
                }
            }
        }
    });
})
</script>

Upvotes: 2

Views: 1038

Answers (1)

Fazal Khan
Fazal Khan

Reputation: 21

Your itemManager code should probably look like this, you will need to store the suggestions in a custom array to look up their relevant ids in the stringToItem Method

itemManager: {
    items: [],  // A custom array that will be used to lookup id    
    stringToItem: function(str)
    {
        //Lookup id for the given str from our custom array
        for (var i=0;i<this.items.length;i++)
            if (this.items[i].name == str) {
                id = this.items[i].id;
                break;
            }    
       return { name: str, id: id };
    },

    itemToString: function(item)
    {
        //Push items to our custom object
        this.items.push(item);
        return item.name ;

    },
    compareItems: function(item1, item2)
    {
        return item1.name == item2.name;
    }    
}

Upvotes: 2

Related Questions