如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组

Posted 2023-04-13

【中文标题】如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组

【英文标题】：How to set option value in select2 type ahead search AND how to add an option group from ajax data

【发布时间】：2014-10-10 07:47:08

【问题描述】：

我正在使用 select2 对几种不同类型的数据创建一种元搜索，我试图弄清楚如何：

明确设置select选项的值（我需要设置成json字符串） 如何从远程数据动态创建选项组

所以我有 select2 调用：

var meta_ajaxUrl = '[[~45]]?search_what=metaSearch';// modx url

$('#metasearch').select2(  
    placeholder: "Search for anything!",
    minimumInputLength: 3,
  ajax: 
    url: meta_ajaxUrl,
    dataType: 'json',
    data: function (term, page) 
      return 
        q2: term
      ;
    ,
    results: function (data, page) 
    console.log(data);
      return  results: data ;
    
  ,
  formatResult: metaFormatResult,
);

以及我的 php 中返回的数组之一的示例

$options = $this->modx->getCollectionGraph('FundRequest', ' ', $criteria);

foreach($options as $option)
    $push = array(
        'id' => array('type' => 'tipa', 'value' => $option->get('id')),
        'name' => $option->Client->get('first_name'),
        'program' => $option->Program->ProgramName->get('name'),
        'location' => $option->Program->Location->get('location'),
        'cams' => $option->get('cams'),
        'text' => $option->Program->ProgramName->get('name'),
    );


array_push($output, $push);


// these get serialized and returned
return $this->modx->toJSON($output);

当输出被序列化时，它看起来像：

"id":"type":"person","value":77,"name":"Foo Bar","cams":1234567,"text":"Foo Bar"

所以，当 select2 为选择控件取值时，它会尝试使用 id 作为 value 属性。如果我查看源代码，我会看到如下内容：

不知何故，我需要告诉 select2 id 的值是 '"type":"person","value":77' 有谁知道如何做到这一点？

此外，搜索搜索三种不同类型的信息，如果能够将它们分类到选项组中，那就太好了。有谁知道如何在 select2 结果中动态插入选项组？

【参考方案1】：

对于第一个问题，您可以调整 formatResult 函数，以便 id 将自身转换为 json 字符串。在我的回复中，我使用一个辅助函数来测试 id 是否已经是一个 json 字符串（它将在第一次转换之后）。

对于第二个问题，您可以使用children 选项（搜索Example Hierarchical Data in the docs）。

我使用了静态数据，但只要您提供与给定示例匹配的 json 对象，它就应该适用于 ajax 数据。

您可以在this jsfiddle 中查看工作演示。

<form method="post" id="myForm">
    <input type="hidden" id="metasearch" style="width: 300px" />
</form>

<script>
$(document).ready(function() 
    $("#metasearch").select2(
        data: [
        
            text    : 'Persons', 
            children: [
            
                "id": "type":"person","value":77, "name":"Foo Bar", "cams":1234567, "text":"Foo Bar"
            ,
            
                "id": "type":"person","value":78, "name":"Bar", "cams":3, "text":"Bar"
            ,
            
                "id": "type":"person","value":79, "name":"Yupi kay", "cams":127, "text":"Yupi kay"
            
            ]
        ,
        
            text    : 'Cars',
            children: [
            
                "id": "type":"car","value":1, "name":"Super", "cams":1, "text":"Super"
            ,
            
                "id": "type":"car","value":2, "name":"Sport", "cams":2, "text":"Sport"
            ,
            
                "id": "type":"car","value":3, "name":"Exec", "cams":3, "text":"Exec"
            
            ]
        
        ],
        formatResult: function(result) 
            if ( ! isJsonString(result.id))
                result.id = JSON.stringify(result.id);

            return result.text;
        
    );

    function isJsonString(str) 
        try 
            JSON.parse(str);
         catch (e) 
            return false;
        
        return true;
    
);
</script>