从 JSON 请求中自动选择 Select2：使用数据表编辑器

Posted 2023-05-07

【中文标题】从 JSON 请求中自动选择 Select2：使用数据表编辑器

【英文标题】：Auto selecting Select2 from JSON request: using Datatables Editor

【发布时间】：2019-07-03 14:03:22

【问题描述】：

我使用 select2 作为一种预先输入的东西：当用户输入时，结果会根据不断变化的输入来填充。我使用 templateResult 自定义带有图像、按钮等的搜索结果。templateSelection 将返回到 select2 输入只是 ajax JSON 的某些部分。

效果很好。

我现在使用数据表编辑器来显示表单。作为编辑器的一部分，当表单以编辑模式打开时，基于我下面的代码的相同 URL ajax 请求会将 initialValue=true 和 value="something" 参数添加到 URL。

在 AJAX php 页面上，我捕获了 initialValue = true 的情况，然后使用与发送的值相对应的 JSON 数据进行响应。

这是我的选择2：

   "label": "Attach to Contact:",
   "name": "assigned_to_contact_id",
   "type": "select2",
        "opts": 
             value: "",
             initialValue: true,
             ajax: 
                    url: "ajax_get_json.php?what=company_autocomplete_contacts",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) 
                        return 
                            query: params.term, // search term
                            page: params.page
                        ;
                    ,
                    processResults: function (data, params) 
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used                            
                        params.page = params.page || 1;

                        return 
                            results: data,
                            pagination: 
                                more: (params.page * 30) < data.total_count
                            
                        ;
                    ,
                    cache: true
                ,
                escapeMarkup: function (markup) 
                    return markup;
                , // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatResults_editor,
                templateSelection: formatResultsSelection_editor,
                allowClear: true,
                placeholder: 
                    "id": "",
                    "text": "(Searching all locations)"
                
            
 

这是我的格式函数：

function formatResults_editor(results) 

    if (results.loading) 
        return "Searching...";
    

    //set image to contact pic
    var image = '';

    if (results.no_contact_pic_requested == 'Y') 
        image = 'company_specific_files/contacts_images/no_pic_requested.png';
     else 
        image = 'company_specific_files/contacts_images/' + results.company_id + '/' + results.id + '/' + 'webcam.jpg';
        //check to see if the pic exists, else set default image
        $.ajax(
            type: "POST",
            async: false,
            url: 'company_specific_files/contacts_images/' + results.company_id + '/' + results.id + '/' + 'webcam.jpg',
            error: function (response, status, xhr) 
                //if no image present, use default image
                image = 'company_specific_files/contacts_images/blank_avatar.png';

            ,
            success: function (response, status, xhr) 
                //this is how I see if there's an image:  check the content-type response from ajax call. Make sure ajax is not async to work
                var ct = xhr.getResponseHeader("content-type") || "";

                if (ct == "image/jpeg") 
                    image = 'company_specific_files/contacts_images/' + results.company_id + '/' + results.id + '/' + 'webcam.jpg';
                 else 
                    image = 'company_specific_files/contacts_images/blank_avatar.png';
                

            
        );
    

    var markup = "<div class='clearfix'><img style='float:left; padding-right: 5px' class='img-responsive' height='50' width='50' src='" + image + "'>" + ' ' + results.label + "</div>";
    return markup;



function formatResultsSelection_editor(results) 


    if (results.id === '') 
        return '(Searching all locations)'; //placeholder added this way since using ajax per docs.
    

    return results.contact_name + ' ' + results.birthdate;

当用户在 select2 中键入/搜索名称时，一切正常：填充值，结果在下拉框中格式化，结果在 select2 输入中显示在 select 之后。

现在，如果编辑器打开并填充 select2 的值，AJAX 请求如下所示：

ajax_get_json.php?what=company_autocomplete_contacts&initialValue=true&value=%224258%22  

...并且该页面的响应如下所示：

"id":"1","text":"sample text","location":"Bayview","contact_name":"Mark","birthdate":"2010-05-28","label":"Mark from Bayview","value":"22","location_id":"4322","company_id":"432342","no_contact_pic_requested":"N"

那么，为什么 select2 不像从 templateSelection 中选择时那样自动填充 JSON 响应标签？

当表单在编辑模式下打开时，当有初始值时，占位符仍然显示“正在搜索...”，当它真的应该说“标记（2010-05-28）”时，就像用户搜索它时一样并选择 templateResult 选项。

这是目前为止，似乎无法取得任何进展。

【参考方案1】：

如果有人遇到过这个：

我发现这与数据表编辑器有关。

我不能使用模板选择。我用 id 和文本格式化结果。从那里，它将相应地填充。