Select2 - Link on formatNoMatches

Question

I'm using Select2 to enhance my <select> input. I populate the <options> with coldfusion and sql. I want to use formatNoMatches to add the option if there are no matches in the user search. I don't want to use a multiple select because it does not work with my coldfusion, plus it would be much simpler to simply add a click event to formatNoMatches.

Somewhere in select2.js, there is code that is stopping mouse events from occurring for formatNoMatches. Is there a way to hack it that will allow mouse events?

$(".select").select2({
    allowClear: true,
    blurOnChange: true,
    openOnEnter: false,
    formatNoMatches: function(term) {
        return "<a href='#' onclick='alert('" + term + "');'"
          + "id='newClient'>Add New Client</a>";
    }
});

I can't get the above code to alert anything.

Jethro

Is select2.js a file that you wrote yourself? – Council

no it is a jquery plug in – Jethro

FYI, updated question to include plugin link ie ivaynberg.github.com/select2 – Polycrates

There are many stopPropagation() in the plugin and certainely one of them prevents to use a link on NoMatches. I have the same problem. – Rolan

Answer 1

This is an issue with select2. There is a bug for the same. But till now no solution. Some idea is there, you can find the details below.

https://github.com/ivaynberg/select2/issues/276

Alphabetize

Answer 2

Use the select2 createSearchChoice function to allow the user to input their own option. Then use the change event on select2 to listen for any new search choices and launch a mini-form or unhide a link on the page to add additional details if a custom choice is selected.

Duffy