带有自动填充和添加新记录的 select2 下拉插件

Question

我现在正在使用 select2 下拉插件。我遇到的情况是我必须添加一个 select2 字段，该字段会自动填充我们应用程序中的现有邮件 ID。我能够这样做，但我还必须在同一字段中添加不在我们的应用程序中的新邮件 ID。我无法解决。你们中的任何人都可以帮我解决这个问题吗...

这是我的查看页面代码。

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

js代码：

$('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);

            });
        }
    });
});

我知道，工作示例可能对您更好，但很抱歉，我不知道该怎么做。小帮助的屏幕截图：http://awesomescreenshot.com/08264xy485

请帮忙..

Answer 1

我已经找到满足我要求的修复程序。如果我们在我们的字段中输入一个不存在的值，结果：function (data, page) {...} returns 一个空数组。我们可以将其检查为：

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"]

希望这会对某人有所帮助。

带有自动填充和添加新记录的 select2 下拉插件

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

php

jquery

select2