Практический пример Select2 AJAX - PullRequest
Новая
       11

Практический пример Select2 AJAX

0 голосов
/ 08 октября 2018

Я попытался найти простой рабочий пример Select2 v4.0.5 с AJAX в документации, так как Javascript и jQuery не мои вещи.Но каждый раз я обнаруживал, что серверная часть отсутствует.Существует так много разных способов: processResults.Я не смог поместить свой код в jsfiddle.net.Итак, вот мой файл .zip: https://framadrop.org/r/JgSTSr1V3h#s0CBgl4eZO80m6LoU8+91nsOi5RlK7kybvaTtCQuR+8=

Файл ajax php приведен в качестве примера, он возвращает идентификатор с текстом в массиве.Если вы удалите select2, вы увидите основные параметры выбора, которые я хотел бы отобразить вначале.

Пример поиска ключевых слов:

optique возвращает: 

string(38) "[{"id":3,"text":"Sciences physiques"}]"

chimie возвращает: 

string(156) "[{"id":4,"text":"Sciences chimiques"},{"id":5,"text":"Sciences de la Terre et sciences connexes de l'environnement"},{"id":6,"text":"Sciences biologiques"}]"

Мне нужна помощь, чтобы отобразить JSON обратно в диалог выбора.

Спасибо.

поиск по скриншоту

Я только что вставил html здесь (js, css в zip-файле выше) 

<!doctype html>
<html lang="fr">
<head>
    <meta name="robots" content="noindex, nofollow">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Discipline</title>

    <link rel="stylesheet" href="vendor/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="templatetwig/css/global.min.css" type="text/css">
    <link rel="stylesheet" href="vendor/select2.min.css" type="text/css">
    <script type="text/javascript" src="vendor/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="vendor/jquery.min.js"></script>
    <script type="text/javascript" src="vendor/jquery-ui.min.js"></script>
    <script type="text/javascript" src="vendor/select2.min.js"></script>
    <script type="text/javascript" src="vendor/bootstrap.min.js"></script>
</head>
<body>
    <form action="index.php" method="post">
        <div class="col-md-12">
            <div class="panel panel-xs">
                <table class="table table-panel table-bordered">
                    <tr>
                        <td class="td-titre">
                            <strong>Discipline <span class="asterisk" id="asterisk-discipline">*</span></strong> (<a href="https://www.fnak.fr/inscription/help.php?help=frascati" target="_blank" title="Aide en ligne">*</a>)
                        </td>
                        <td colspan="3"><select name="sejour_discipline" class="form-control js-discipline-data-ajax" id="sejour_discipline"  ><option value="" disabled="disabled" selected>&nbsp;</option><option value="1" disabled="disabled">Sciences exactes et naturelles</option><option value="1"selected>1.1 - Mathématiques</option><option value="2">1.2 - Informatique et science de l'information</option><option value="3">1.3 - Sciences physiques</option><option value="4">1.4 - Sciences chimiques</option><option value="5">1.5 - Sciences de la Terre et sciences connexes de l'environnement</option><option value="6">1.6 - Sciences biologiques</option><option value="7">1.7 - Autres sciences naturelles</option><option value="2" disabled="disabled">Sciences de l'ingénieur et technologiques</option><option value="8">2.1 - Génie civil</option><option value="9">2.2 - Génie électrique, électronique, ingénieurie informationnelle</option><option value="10">2.3 - Génie mécanique</option><option value="11">2.4 - Génie chimique</option><option value="12">2.5 - Génie des matériaux</option><option value="13">2.6 - Ingénierie médicale</option><option value="14">2.7 - Génie de l'environnement</option><option value="15">2.8 - Biotechnologie environnementale</option><option value="16">2.9 - Biotechnologie industrielle</option><option value="17">2.10 - Nanotechnologies</option><option value="18">2.11 - Autres domaines techniques et technologiques</option><option value="3" disabled="disabled">Sciences médicales</option><option value="19">3.1 - Médecine fondamentale</option><option value="20">3.2 - Médecine clinique</option><option value="21">3.3 - Sciences sanitaires</option><option value="22">3.4 - Biotechnologie médicale</option><option value="23">3.5 - Autres sciences médicales</option><option value="4" disabled="disabled">Sciences agricoles</option><option value="24">4.1 - Agriculture, sylviculture et pêche</option><option value="25">4.2 - Zootechnie et science laitière</option><option value="26">4.3 - Sciences vétérinaires</option><option value="27">4.4 - Biotechnologie agricole</option><option value="28">4.5 - Autres sciences agricoles</option><option value="5" disabled="disabled">Sciences sociales</option><option value="29">5.1 - Psychologie</option><option value="30">5.2 - Économie et administration des entreprises</option><option value="31">5.3 - Sciences de l'éducation</option><option value="32">5.4 - Sociologie</option><option value="33">5.5 - Droit</option><option value="34">5.6 - Sciences politiques</option><option value="35">5.7 - Géographie sociale et économique</option><option value="36">5.8 - Médias et communication</option><option value="37">5.9 - Autres sciences sociales</option><option value="6" disabled="disabled">Sciences humaines</option><option value="38">6.1 - Histoire et archéologie</option><option value="39">6.2 - Langues et littérature</option><option value="40">6.3 - Philosophie, morale et religion</option><option value="41">6.4 - Arts (arts, histoire de l'art, arts de la scène, musique)</option><option value="42">6.5 - Autres sciences humaines</option></select></td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
    <script>
    $(document).ready(function () {
    $(".js-discipline-data-ajax").select2({
        width: "100%",
        ajax: {
            url: '/ajx/ajx_frascati_domaine.php',
            dataType: "json",
            type: "GET",
            data: function (params) {
                console.log(params);
                return {
                    q: params.term, // search term
                };
            },
            processResults: function (data) {
                var arr = []
                $.each(data, function (index, value) {
                    arr.push({
                        id: index,
                        text: value
                    })
                })
                return {
                    results: arr
                };

            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }
        });
    });
</script>
        <div class="footer"></div>
    </body>
</html>
...