jQuery-Tagit icon indicating copy to clipboard operation
jQuery-Tagit copied to clipboard

Accessing autocomplete object

Open payomdousti opened this issue 10 years ago • 1 comments

Problem: I'm trying to adjust how my autocomplete results display

Proposed Solution: Make use of the underlying jquery-ui autocomplete object and using the appendTo option

It doesn't seem like there's a straightforward way to access the full autocomplete object, so I tried emulating this code from the example page.

$('#demo8').tagit({tagSource:function (request, response) {
    //setup the search to search the label and the description
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
    response($.grep(availableTagsCustom, function (value) {
        return matcher.test(value.label) || matcher.test(value.desc);
    }));
}});

//get a reference to the autocomplete object
var ac = $('#demo8').tagit('autocomplete');

//add a custom class for themeing
ac.menu.element.addClass('custom-ac');

//attach the autocomplete to the bottom left of the tag list
ac.options.position = {    my:"left top", at:"left bottom", collision:"none", of:$('#demo8').data('tagit').element };

Applying that to my code...

var tagit = $('#tags').tagit({
    tagSource: function (request, response) {
        $.getJSON(
            "/search",
            { term: request.term, limit:10},
            function( data ) {
                response(
                    $.map( data, function( item ) {
                        return {
                            label: item.value.replace(/,/g, ''),
                            value: item.id
                        }
                    })
                );
            }
        );
    },
    select:true,
    triggerKeys:['enter', 'tab'],
    allowNewTags: false
});

var ac = $('#tags').tagit('autocomplete');
ac.options.position = { my:"left top", at:"left bottom", collision:"none", of:$('#tags') };

... I get this error which traces back to the last line 'ac.options.position'

Uncaught TypeError: Cannot set property 'position' of undefined 

I'm using the following libraries

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script src="/js/jQuery-Tagit/js/tagit.js"></script> // commit adcad6537b

payomdousti avatar Jun 25 '14 20:06 payomdousti

I fixed this in PR #108 (or PR #109 which includes other PRs)

brettz9 avatar Jul 11 '15 02:07 brettz9