select2 drop-down plugin with auto-populate together with add new record

Question

I'm now working with select2 drop-down plugin. I came situation that I have to add a select2 field which auto populate the existing mail id's in our app. I was able to do so, but I also has to add new mail id's which are not in our app in same field. I do not able work it out. Can any of you please help me out from 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, working example could be better to you, but I'm sorry, I do not know how to do it. A screen shot for small help:http://awesomescreenshot.com/08264xy485

Kindly help..

Answer 1

I have got a fix for my requirement. If we enter a non-existing value in our field, results: function (data, page) {...} returns an empty array. We can check this as:

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};
}

But, better than this I suggest you to do a check in the area where we fetch result (here: Utils.siteUrl()+'mailbox/get_all_contacts'). I have done this to fix my issue:

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);
}

Getting value in JS:

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

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

hope this will help someone.