Quick fill combobox / autocomplete add new

I’ve been searching and I can’t seem to find a plugin or this feature built into Select2. Basically, what I’m wanting is the ability to change the “no results found” message into a “+ Add New” button that when you click on the button it pops up a bootstrap modal with the body being an <iframe /> to a form that when submitted adds a new object to the database and then adds the new <option /> to your <select />.

Here is an animated gif that shows this UI pattern being used on Quickbooks Online. Based on the CSS classes, I think they are calling it a Quick fill combobox.

This seems like it would be a really handy UI pattern that could be reused by lots of people. So my question is:

1. Is this a feature that would be good to add directly to select2? And is this feature already on the roadmap?
2. If the answer is no to the first question, then is there an official plugin policy and if so what is it? I would consider writing a plugin, but I don’t want to waste my time on it if a plugin like this already exists or if their are plans already to add this type of functionally directly to select2.
3. Any tips on the best way to replace the “no results found” message with a button that has an onclick event attached to it?

Thanks to @claar for finding the example on Quickbooks online and making the animated gif.

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate
• The issue still exists against the latest master branch of Select2
• This is not a usage question (Those should be directed to the community)
• I have attempted to find the simplest possible steos to reproduce the issue
• I have included a failing test as a pull request (Optional)

Libraries

• Select2 version: 4.0.2

[epicserve]

I’ve abstracted my code which could be used by anyone to add the functionality that is show in the animated gif above. It’s not the most elegant way of doing things, but until this is an officially supported way of hooking into the “no results” message, this is a way to get it done.

Also, here is a JS Fiddle I made real quick to demo it, https://jsfiddle.net/epicserve/6000kasq/

P.S. I’m not sure if any Select2 contributors with commit access are listening to this issue, but if you are, I would be happy to make a pull request that adds in some options so there is an official way to hook into Select2 for adding this functionality. Just let me know and let me know what variable and API ideas you have.

/**
 * Select2QuickFillCombobox - A HTML select component that uses Select2 to add a button for adding items to a select when no options are found in the search.
 * 
 * @param $select2_el                                           The jQuery select element
 * @param {Object}  [options]
 * @param {Object}  [options.no_results_add_button_callback]    A function to call after the button as been added
 * @param {Boolean} [options.no_results_add_button_template]    The button HTML template to use
 * @constructor
 */
function Select2QuickFillCombobox($select2_el, options) {

    this.$select2_el = $select2_el;
    this.options = options || {};
    var defaults = {
        no_results_add_button_callback: null,
        no_results_add_button_template: '' +
            '<button type="button" class="btn btn-default">' +
            '    <span class="glyphicon glyphicon-plus-sign"></span> Add Item' +
            '</button>'
    };

    var select2_options = $.extend(defaults, this.options);

    if (this.$select2_el.data('select2')) {
        this.$select2_el.select2('destroy');
    }
    this.$select2_el.select2(select2_options);
    this.override_select2_display_message_method();

}

Select2QuickFillCombobox.prototype = {

    override_select2_display_message_method: function() {

        jQuery.fn.select2.amd.require('select2/results').prototype.displayMessage = function(params) {

            var escapeMarkup = this.options.get('escapeMarkup');

            this.clear();
            this.hideLoading();

            var $message = $(
              '<li role="treeitem" aria-live="assertive"' +
              ' class="select2-results__option"></li>'
            );

            var message = this.options.get('translations').get(params.message);
            var no_results_add_button_template =  this.options.get('no_results_add_button_template');
            var no_results_add_button_callback =  this.options.get('no_results_add_button_callback');
            message = message(params.args);

            if (params.message == 'noResults' && no_results_add_button_template) {

                var $add_btn = $(no_results_add_button_template);
                $message.append($add_btn);
                if (no_results_add_button_callback) {
                    no_results_add_button_callback($add_btn);
                }

            } else {
                $message.append(escapeMarkup(message));
            }

            $message[0].className += ' select2-results__message';

            this.$results.append($message);

        };

    }

};

[alexweissman]

@epicserve, consider writing this as a plugin, and posting it to the forums!