jQuery-Tagit
jQuery-Tagit copied to clipboard
Accessing autocomplete object
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
I fixed this in PR #108 (or PR #109 which includes other PRs)