jQuery select2 динамических параметра

У меня есть множественный выбор, который я хочу использовать в качестве окна поиска, чтобы пользователь мог искать по категории, типу события, местоположению и ключевым словам. Он имеет следующую структуру:

<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. Проблема в том, что в настоящее время я могу выбрать только вариант местоположения, я не могу создать новый тег. Кто-нибудь знает, как я мог этого добиться?


javascript jquery select2
person geoffs3310    schedule 16.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В конце концов я добился этого, используя источник данных 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;
    }
});

Содержимое server.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);
person geoffs3310    schedule 16.03.2016