Use UI-autocomplete _renderItem method

[aristizabal95]

Hello, I need to have an input which uses tags but also displays images from the autocomplete. I know how to do these with UI-autocomplete by overriding the _renderItem method, but it seems to be not that straightforward with this plugin. I tried this:

function cMainArtistTags(){
    $('.artistTags').each(function(){
        if($(this).find('.tagsinput').length == 0){
            $('input', this).tagsInput({
                defaultText: 'Selecciona un artista principal',
                autocomplete_url: 'url',
                height: 'auto',
                width: 'auto'
            })
            $('input', this).data('ui-autocomplete')._renderItem = function(ul, item) {
                console.log(item);
                return $('<li class="userListT3-item"></li>')
                    .append('html stuff to render')
                    .appendTo(ul);

            }
        }
    })
}

Basically running renderItem on each input selected. But I'm getting this error

Uncaught TypeError: Cannot set property '_renderItem' of undefined

Is there anyway to achieve this?

[khyamay]

Have you seen this pull request ? https://github.com/xoxco/jQuery-Tags-Input/pull/229/commits/94d86bcbf7df12d63a415dc2fe1ed6f1ecd7dfdb. I used it and worked fine for me. Update: My bad, You know how to do it by overriding the _renderItem method. Would love to know if it's possible any other way.

[khyamay]

ok just played around and managed to do with this library. Here's the example https://codepen.io/khyamay/pen/NBBPYp?editors=1000

[aristizabal95]

@khyamay Checking your code I was able to determine that the problem wasn't with overriding the function, but that for some reason the data-ui-autocomplete attribute is undefined during the initialization of inputTags. I'm not sure what is causing this, and I was able to make a dirty solution by adding a setTimeOut to the function that overrides the _renderItem method.