Select2 drop-down plugin with automatic completion along with adding a new record

Question

Now I am working with a select2 dropdown plugin. I came to a situation where I need to add a select2 field that automatically populates the existing mail id in our application. I was able to do this, but I also need to add a new mail id, which is not in our application in the same field. I can’t solve it. Can any of you help me with this ...

Here is my view page code.

 <input type="hidden" class="select2 to_email w-100" name="to_email[]"
 data-role="to_email" data-width="100%" data-placeholder="To" value="">

Js Code:

$('body').on('click','[data-button="reply-mail"],[data-click="reply"]', function() {
    attach = [];
    var $ti = $(this).closest('[data-role="row-list"]').find('[data-role="reply-mail-wrap"]');
    var $to_this = $ti.find('[data-role="to_email"]');
    var mail_toadr = $ti.find('input[name="to_addr"]').val(); 
    $($to_this).select2({
        placeholder: "Search for a contact",
        minimumInputLength: 3,
        //maximumSelectionLength: 1,
        multiple : true,
        ajax: {
            url: Utils.siteUrl()+'mailbox/get_all_contacts',
            type: 'POST',
            dataType: 'json',
            quietMillis: 250,
            data: function (term, page) {
                return {
                    term: term, //search term
                    page_limit: 100 // page size
                };
            },
            results: function (data, page) {
                return { results: data};
            }

        },
        initSelection: function(element, callback) {
            return $.getJSON(Utils.siteUrl()+'mailbox/get_all_contacts?email=' + (mail_toadr), null, function(data) {
                    return callback(data);

            });
        }
    });
});

I know a working example might be better for you, but I'm sorry, I don't know how to do this. Screenshot for a little help: http://awesomescreenshot.com/08264xy485

Please help ..

Answer 1

. , : function (data, page) {...} . :

results: function (data, page) {
    for (var obj in data) {
        id = JSON.stringify(data[obj].id);
        text = JSON.stringify(data[obj].text);
        if (id == '"0"') {
            $ti.find('.to_email').select2('val', '<li class="select2-search-choice"><div>'+ text +'</div><a tabindex="-1" class="select2-search-choice-close" onclick="return false;" href="#"></a></li>');
        }
    }
    return { results: data};
}

, , , (: Utils.siteUrl()+'mailbox/get_all_contacts'). , :

function get_all_contacts()
{
    // $contacts is the result array from DB.
    // $term is the text to search, eg: 111

    foreach($contacts as $contact_row) {
        $contact_all[] = array('id' => $contact_row['id'], 'text' => $contact_row['primary_email']);
    }
    if (empty($contact_all)) {
        $contact_all = array('0' => array('id' => 'undefinedMAILID_'. $term, 'text' => $term ) );
    }
    $contact_data['results'] = $contact_all;
    send_json_response($contact_all);
}

JS:

sel_ids = $('.to_email').select2('val');
console.log(sel_ids);

// console will show -  ["value if mail id is existing", "undefinedMAILID_111"]

, -.