Click event in select2 tag with link

Question

I am using select2 in tag mode. My element text is a link, for example:

<a href='url'>tag1</a>.

select2 seems to swallow the click event of the tag (selected choice), so I cannot go to the link.

Any ideas on how to make the link work?

Answer 1

Select2 disables click events by default, and for now, you should use a workaround to achieve the desired results. Here is an example of how I did this, thanks to the resources below. This will not work unless you re-create the variable instance with the return value .data ('select2')

First add the class to your links:

<a href="#" class="detail-link">hello</a>

Then you should listen for the onSelect event for Select2

    var search = $("#searchBox");
    search.select2({
        placeholder: "Search...",
        allowClear: true,
        minimumInputLength: 3,
        maximumSelectionSize: 1,
        escapeMarkup: function(m) { return m; },
        ajax: {     blah blah blah       },
        formatResult: window.App.formatFunction
    });


    search= search.data('select2');

    search.onSelect = (function(fn) {
        return function(data, options) {
            var target;

            if (options != null) {
                target = $(options.target);
            }

            if (target && target.hasClass('detail-link')) {
                window.location = target.attr('href');
            } else {
                return fn.apply(this, arguments);
            }
        }
    })(search.onSelect);

//JFiddle , .data('select2')

EDIT: - fooobar.com/questions/227057/...

Answer 2

select2-select event:

var $q = $('#select2input');
$q.select2({
    // your settings
});

$q.on('select2-selecting', function(e){
    window.location = e.choice.url;
});

AJAX :

{
    "items":[
        {
            "id": "1",
            "text": "Foo",
            "url": "/foo"
        },
        {
            "id": "8",
            "text": "Bar",
            "url": "/bar"
        }
    ]
}