Skip to content
This repository has been archived by the owner on May 9, 2018. It is now read-only.

Accessing autocomplete object #98

Open
payomdousti opened this issue Jun 25, 2014 · 1 comment
Open

Accessing autocomplete object #98

payomdousti opened this issue Jun 25, 2014 · 1 comment

Comments

@payomdousti
Copy link

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
@brettz9
Copy link
Collaborator

brettz9 commented Jul 11, 2015

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants