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

【问题标题】：How to set option value in select2 type ahead search AND how to add an option group from ajax data如何在 select2 类型提前搜索中设置选项值以及如何从 ajax 数据添加选项组
【发布时间】：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 结果中动态插入选项组？

【问题讨论】：

标签： jquery jquery-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>

【讨论】：