Question

我正在使用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为select控件的值时，它会尝试使用id作为value属性。如果我查看源代码，我会看到以下内容：

我需要告诉select2 id的值是'{“type”：“person”，“value”：77}' 有谁知道如何做到这一点？

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

Answer 1

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

对于第二个问题，您可以使用children选项（搜索示例分层数据 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>

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

1 个答案: