jQuery select2 动态选项

jQuery select2 dynamic options

本文关键字：选项 动态 select2 jQuery      更新时间：2023-09-26

我有一个多选，我想将其用作搜索框，以便用户可以按类别、事件类型、位置和关键字进行搜索。它具有以下结构：

<select name="search-term[]" multiple="multiple">
    <optgroup label="Categories">
        <option value="category_4">Internal</option>
        <option value="category_2">Business</option>
        <option value="category_5">External</option>
        <option value="category_1">Science</option>
        <option value="category_6">Sports and Social</option>
    </optgroup>
    <optgroup label="Event Types">
        <option value="eventtype_2">Meeting</option>
        <option value="eventtype_3">Social Activity</option>
        <option value="eventtype_4">Sporting Activity</option>
        <option value="eventtype_1">Symposium</option>
    </optgroup>
    <optgroup label="Locations">
        <option value="location_2">Office 1</option>
        <option value="location_3">Office 2</option>
        <option value="location_1">Office 3</option>
    </optgroup>
</select>

我已经初始化了 select2，tags选项设置为 true，如下所示：

$('select').select2({
    tags : true,
    createTag: function (params)
    {
        return {
            id: 'keyword_' + params.term,
            text: params.term,
            newOption: true
        }
    }
});

这允许用户输入新选项（如果不存在），并满足关键字要求。任何新标签都附加keyword_以便服务器在提交表单时知道如何处理它们。

这一切都按我的预期工作，但是我遇到的问题是，如果有人想搜索与其他选项之一相同的关键字，那么他们将无法创建新的关键字标签，它只会让他们选择现有选项。例如，如果我搜索Office 1我可能想要搜索位于办公室 1 的事件，或者我可能想要执行关键字搜索，以便搜索标题中包含办公室 1 的事件。问题是目前我只能选择位置选项，我无法创建新标签。有谁知道我如何实现这一目标？

我最终通过使用 AJAX 数据源实现了这一目标，它使您可以更好地控制向用户显示的选项。这是我的代码：

$('select').select2({
    ajax: {
        url: "/server.php",
        dataType: 'json',
        type: "GET",
        delay: 0,
        data: function (params) {
            var queryParameters = {
                term: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.text,
                        id: item.id,
                        children: item.children
                    }
                })
            };
        },
        cache: false
    },
    templateSelection: function(item)
    {
        return item.parent+': '+item.text;
    }
});

服务器内容.php：

<?php
$term = !isset($_GET['term']) ? null : ucfirst($_GET['term']);
$categories = array('Meeting', 'Seminar', 'Sports and Social');
$locations = array('Cambridge', 'London', 'Northwich');
$matching_categories = array();
$matching_locations = array();
foreach($categories as $i => $cat) {
    if(is_null($term) || stripos($cat, $term)!==false) {
        $matching_categories[] = array(
            'id' => 'category_'.$i,
            'text' => $cat,
            'parent' => 'Category'
        );
    }
}
foreach($locations as $i => $loc) {
    if(is_null($term) || stripos($loc, $term)!==false) {
        $matching_locations[] = array(
            'id' => 'location_'.$i,
            'text' => $loc,
            'parent' => 'Location'
        );
    }
}
$options = array();
if(!empty($matching_categories)) {
    $options[] = array(
        'text' => 'Category',
        'children' => $matching_categories
    );
}
if(!empty($matching_locations)) {
    $options[] = array(
        'text' => 'Location',
        'children' => $matching_locations
    );
}
if(!is_null($term)) {
    $options[] = array(
        'text' => 'Keyword',
        'children' => array(
            array(
                'id' => 'keyword_'.$term,
                'text' => $term,
                'parent' => 'Keyword'
            )
        )
    );
}
echo json_encode($options);
相关文章：