films-symfony-4-2/templates/videotheque/testajax.html.twig

{% extends "videotheque/base.html.twig" %}



{% block title %}Ajax{% endblock %}
{% block titre %}Ajax{% endblock %}

{% block body %}
<form method="post" action="">
    <label for="mot-cle">Chercher un nom de réalisateur</label>
    <input list="results" type="text" id="mot_cle" autocomplete="off">
    <datalist id="results">

    </datalist>
</form>

{% endblock %}

{% block javascripts %}
<script src="{{ asset('bundles/app/assets/oXHR.js') }}"></script>
<script>

$(document).ready( function() {
    if (!$('body').hasClass('searching')) {
        $('#mot_cle').keyup(function (e) {
            var contenu = $('#mot_cle').val();
            if (contenu.length > 2) {
                setTimeout(function() {
                    $.ajax({
                        type: 'POST',
                        url: "{{ path('ajouter') }}",
                        data: 'mot_cle=' + contenu,
                        success: function (data) {
                            parseJson(data);
                            return;
                        },
                        complete: function(){

                        }
                    });
                }, 1000);
            }
        });
    }
});
    
function parseJson(data) {
    $('#results').empty();
    for (let i = 0; i < data.length; i++) {
        let realisateur = data[i];
        console.log("OBJECT JSON %o", realisateur);
        let {id, nom, prenom} = JSON.parse(realisateur);
        let text = prenom + " " + nom;
        let text2 = nom + " " + prenom;
        $('#results').append('<option value="'+text+'" />');
        //$('#results').append('<option value="'+text2+'" />');
    }
}

</script>

{% endblock %}