Jquery select2 - не работает

Я использую плагин select2 (ivaynberg.github.io/select2). Я пытаюсь отобразить выпадающий список (выберите). Он получает все элементы в data.php в качестве параметров. Однако select2 должен быть плагином автозаполнения и должен искать поисковый запрос для ввода клиента и отображать только результаты сопоставления. На данный момент он отображает все элементы и не получает результаты поиска. Извините за мой язык

data.php повторяет это:

[{
    "id": "1",
    "text": "item1",
    "exercise": "blah text"
  }, {
    "id": "2",
    "text": "item2"
  }
]

Код:

$(document).ready(function () {
    $('#thisid').select2({
        minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });
});

а вход:

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

Я хочу найти ключ, я новичок в этом плагине и потратил целый день на поиск примеров.

Ответ 1

select2 не будет делать AJAX, если он привязан к стандартному элементу управления select. Он ДОЛЖЕН быть прикреплен к скрытому элементу управления input для загрузки через AJAX.

Обновление. Это исправлено в Select2 4.0. Из Предустановленные примечания:

Согласованность со стандартными элементами <select> для всех адаптеров данных, устраняя необходимость скрытых элементов <input>.

Его также можно увидеть в функции в разделе .

Ответ 2

Я предполагаю, что user2315153 хочет получить несколько удаленных значений и неправильно назначить select2() с помощью ajax-вызова элементу <select> .

Правильный способ получения удаленных значений - использовать обычный элемент <input> , и если требуется несколько значений, сообщите "множественный" параметр при вызове метода. Пример:

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
        minimumInputLength: 2,
        multiple: true,
        ajax: {
              ...

Элемент <select> НЕ МОЖЕТ использоваться для удаленных значений

UPDATE: Как и в случае с select2 4.0.0, скрытые входы устарели:

https://select2.github.io/announcements-4.0.html#hidden-input

Это означает: вместо использования ввода для атрибута select2 плагина используйте тег SELECT.

Обратите внимание: легко использовать любой формат json с вашего сервера. Просто используйте "processResults" для этого.

Пример:

<select id='thisid' class='select2-input select2'></select>
<script>
        $("#thisid").select2({
            multiple: true,
            closeOnSelect: true,

            ajax: { 
                url: "myurl",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                      q: params.term,
                      page: params.page
                    };
                  },
                processResults: function (data, page) { //json parse
                    console.log("processing results");
                    //Transform your json here, maybe using $.map jquery method
                    return { 
                       results: yourTransformedJson
                    };
                },
                cache: (maybe)true
            }
        });
</script>

Ответ 3

Я пробую код, он работает хорошо. Я думаю, вы не включаете фреймворк jquery или проверяете путь js и css.

<!DOCTYPE html>
<html>
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="select2.min.js"></script>
    <script>
        $(document).ready(function() { 
            $('#thisid').select2({
                minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });

        });
    </script>
</head>
<body>
    <input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

</body>
</html>

Ответ 4

Думаю, не нужно идти со скрытым элементом ввода. Вы можете попробовать, получить простые html-данные из ajax-вызова и установить его, а затем init select2 resetting method. Здесь фрагмент кода

HTML

<select id="select" name="select" class="select2">
        <option value="" selected disabled>Please Select Above Field</option>
</select>

Javascript

    $.ajax({
        type: "POST",
        cache:false,
        url: YOUR_AJAX_URL,
        success: function(response)
        {
            $('#select').html(response);
        }
    });
    $('#select').select2("val","");

Ajax Response:

<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>

Ответ 5

После большого чтения я решил изменить сам select2.js.

В строке 2109 измените ее на

this.focusser.attr("id", "s2id_"+this.select.context.id);

Если ваш тег ввода как таковой

<select id="fichier">

Следовательно, ваш тег ввода, который выполняет поиск по списку, будет иметь идентификатор s2id_fichier_search

Насколько я знаю, конфликт не должен быть, и ЭТО позволит вам иметь несколько select2 на одной странице и запускать ваши функции (в том числе .get,.post) через их события, например.

$(function() { 
  $('#s2id_fichier_search').keyup(function() {
    console.log('Be Practical')
  })
}

Итак, это будет работать, как если бы вы использовали

<select id="fichier" onkeyup="console.log('Be Practical')">