Как правильно сделать вывод данных в select2 получаемых по ajax?

Question

[Константин Руденко]

Делаю динамическую подгрузку списка городов через api vk.com.
В коде прописал так.
HTML:

<div class="form-group">
    <label for="sity" class="col-sm-2 control-label">Выберите город</label>
    <div class="col-sm-10">
        <select class="form-control" id="sity" multiple="multiple"></select>
    </div>
</div>

JS:

$('#sity').select2({
    ajax: {
        url: "https://api.vk.com/method/database.getCities",
        type: 'GET',
        dataType: 'jsonp',
        delay: 250,
        data: function (params) {
            return {
                country_id: 1,
                q: params.term // search term
            };
        },
        processResults: function (data, params) {
            console.log(data.response);
            console.log(params);
            var str = '';
                for (var i in data.response) {
                    var region = (data.response[i]['region']) ? ' (' + data.response[i]["region"] + ')' : '';
                    str += '<option value="' + data.response[i]["cid"] + '">' + data.response[i]["title"] + region + '</option>';
                }
                console.log(str);
            return str;
        }
    },
    maximumSelectionLength: 1
});

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

Comments

[OVK2015]

Делал так,- работает штатно

valueList = $('#valueList').select2
	({
		minimumResultsForSearch: Infinity,
		placeholder: 'Выберите значение',
	});

..........
function initValueList(data)
{
	valueList.html
	(
		$(
			data.reduce(function(prev, cur, index)
			{
				return prev + '<option value="' + index + '">' + cur + '</option>';
			}, ''
		)
	));
	valueList.val(null).trigger('change');}

[Константин Руденко]

OVK2015: извините, не совсем понял в каком месте тут делать ajax запрос?

[OVK2015]

Константин Руденко: В любом)
Вы пользуетесь processResults, я обычно success. Вот в одном из этих callback`ов и вызываете initValueList, передавая ей данные(data), полученные от сервера. У меня это был обычный массив

[OVK2015]

Само объявление переменной(var valueList;) вынесите на уровень js файла. Чтобы была глобальная область видимости.
Создается js объект select2 где-нибудь в document.ready(...).

Там вся идея в том, что не нужно по новой создавать select2 при обновлении содержимого. На уровне DOM меняете под него option, и с помощью события "change" обновляете сам js объект.

[Константин Руденко]

OVK2015: Спасибо. Сейчас попробую.

[Константин Руденко]

OVK2015: Похоже я вас так до конца и не понял, переделал свой пример под ваш и теперь он начал выдавать ошибку

var valueList;
valueList = $('#sity').select2({
    ajax: {
        url: "https://api.vk.com/method/database.getCities",
        type: 'GET',
        dataType: 'jsonp',
        delay: 250,
        data: function (params) {
            return {
                country_id: 1,
                q: params.term // search term
            };
        },
        success: function (data) {
            return initValueList(data.response);
        }
    },
    maximumSelectionLength: 1
});


function initValueList(data)  {
    for (var i in data) {
        var region = (data[i]["region"]) ? ' (' + data[i]["region"] + ')' : '';
        var cid = data[i]["cid"];
        var title = data[i]["title"];
        valueList.html
        (
            $(function(cid, title, region) {
                return '<option value="' + cid + '">' + title + region + '</option>';
            }, '')
        );
        valueList.val(null).trigger('change');
    }
}

[OVK2015]

Константин Руденко:
А сама ошибка где/что пишет то?

[OVK2015]

Константин Руденко:
Это на вскиду:
Запрос
https://api.vk.com/method/database.getCities?count...
Ответ:

{"response":[{"cid":1,"title":"Москва","important":1},{"cid":2,"title":"Санкт-Петербург","important":1},{"cid":10,"title":"Волгоград"},{"cid":37,"title":"Владивосток"},{"cid":153,"title":"Хабаровск"},{"cid":49,"title":"Екатеринбург"},{"cid":60,"title":"Казань"},{"cid":61,"title":"Калининград"},{"cid":72,"title":"Краснодар"},{"cid":73,"title":"Красноярск"},{"cid":95,"title":"Нижний Новгород"},{"cid":99,"title":"Новосибирск"},{"cid":104,"title":"Омск"},{"cid":110,"title":"Пермь"},{"cid":119,"title":"Ростов-на-Дону"},{"cid":123,"title":"Самара"},{"cid":151,"title":"Уфа"},{"cid":158,"title":"Челябинск"}]}

Зачем Вам эти грабли с перебором св-в объекта(for (var i in data))
берите data.response и работайте как с обычным массивом

[OVK2015]

Константин Руденко: + Чем Вам так return понравился? Он даром не нужен в success
И передаваемые данные в ajax в ф-цию заворачивать, тоже ни к чему)

[Константин Руденко]

OVK2015: Переделал ещё, теперь другая ошибка выходит.

var valueList;

valueList = $('#sity').select2({
    ajax: {
        url: "https://api.vk.com/method/database.getCities",
        type: 'GET',
        dataType: 'jsonp',
        delay: 250,
        data: function (params) {
            return {
                country_id: 1,
                q: params.term // search term
            };
        },
        success: function (data) {
            initValueList(data.response);
        }
    },
    maximumSelectionLength: 1
});

function initValueList(data)  {
    valueList.html
    (
        $(data.reduce(function(cid, title, region) {
            var reg = (region) ? ' (' + region + ')' : '';
            return '<option value="' + cid + '">' + title + reg + '</option>';
        }, ''))
    );
    valueList.val(null).trigger('change');
}

Выводит такую ошибку при вводе данных в поле.

Uncaught ReferenceError: jQuery1124003864469288968775_1480858544606 is not defined
    at database.getCities?callback=jQuery1124003…_1480858544606&country_id=1&q=в&_=148085854…:1

данные в ajax передаются функцией, т.к. судя документации select2 таким образом передаются введенные данные.
данные по ajax приходят верные, если в месте прописать console.log

success: function (data) {
      console.log(data);
 }

то в консоль все верно выводится, а вот как их вывести на страницу, все ни как не соображу.

[OVK2015]

Константин Руденко:
Как-то так:

</code<script type="text/javascript">
		var valueList;

		$(document).ready(function()
		{
			valueList = $('#valueList').select2
			({
				maximumSelectionLength: 1
			});

			$.ajax
			({
				url: "https://api.vk.com/method/database.getCities",
				type: 'GET',
				dataType: 'jsonp',
				data:
				{
					country_id: 1
				},
				success: function(data)
				{
					initSelect2(data);
				}
			});

			function initSelect2(data)
			{
				valueList.html
				(
					$(data.response.reduce(function(prev, cur, index)
					{
						return prev + '<option value="' + cur.cid + '">' +
							cur.title + '</option>';
					}, ''))
				);
				valueList.val(null).trigger('change');
			}
		});
	</script>>

За ответ пойдет?

[Константин Руденко]

OVK2015: о, круто, это уже ближе к цели, при постановке курсора в поле поиска, появляются полученные данные. Теперь надо как получить то что вводится в строку поиска и передать в запрос ajax.
Раньше делая ajax запрос внутри select2, можно было получить данные таким способом

data: function (params) {
      return {
          country_id: 1,
          q: params.term // в это место подставлялся запрос из поля и подгружались новые данные
     };
},

как теперь можно было бы это сделать?

[Константин Руденко]

Если бы мне надо было только 1 раз делать запрос, то я бы не стал связываться с select2, а т.к. нужно что бы данные при вводе постоянно менялись, решил попробовать сделать через этот инструмент, но что то сам все никак не могу понять его.

[OVK2015]

Константин Руденко: Вынесите function initSelect2(data) из $(document).ready(function() на уровень js файла. И вызывайте сколько нужно при обновлении.
У него по дефолту поиск идет среди его уже существующих значений.
Вы хотите усложнить задачу,- делать запросы к vk, в зависимости от того, что юзер вводит в поле поиска select2 что ли?

[Константин Руденко]

OVK2015: Да, мне нужно в запрос ajax отправлять введенные пользователем данные.
Попробуйте перейти по ссылке

И в зависимости от того что вводить, подгружаются разные города.

[Константин Руденко]

https://api.vk.com/method/database.getCities?count...

[OVK2015]

Константин Руденко:
Ну Вы даете. Гугл отключен?
itsolutionstuff.com/post/jquery-select2-ajax-autoc...

[Константин Руденко]

OVK2015: в том то и дело, что искал, и в документации подобное есть, но данные не выводятся у меня
в начале я примерно тоже самое вам написал что и по той ссылке написано

$('#sity').select2({
    ajax: {
        url: "https://api.vk.com/method/database.getCities",
        type: 'GET',
        dataType: 'jsonp',
        delay: 250,
        data: function (params) {
            return {
                country_id: 1,
                q: params.term // search term
            };
        },
        processResults: function (data) {
            return {
                results: data.response
            };
        }
    },
    maximumSelectionLength: 1
});

[Константин Руденко]

Спасибо за помощь, я все таки нашел способ как мне вывести данные отличные от стандартных

$('#sity').select2({
    ajax: {
        url: "https://api.vk.com/method/database.getCities",
        type: 'GET',
        dataType: 'jsonp',
        delay: 250,
        data: function (params) {
            return {
                country_id: 1,
                q: params.term // search term
            };
        },
        processResults: function (data) {
            var items =  $.map(data.response, function(item, i, params) {
                var reg = (item.region) ? ' (' + item.region + ')' : '';
                var title = item.title + reg;
                    return {
                        id: item.cid,
                        text: title
                    };
                });
            return {results: items};
        }
    },
    maximumSelectionLength: 1
});

[OVK2015]

Константин Руденко: Мои поздравления)