Probleme autocomplete Jquery sur une table dynamique

Signaler
-
 Norman -
Bonjour,

depuis hier j'essaie de trouver une solution mais j'arrive pas ,

mon probléme c'est que le autocomplete de Jquery ne marche que sur la premiere ligne quand j'ajoute une deuxiement ligne ca marche plus ,

si possible aussi de m'indiquer comment faire pour afficher aussi le prix automatiquement de puis la table en saisissant la reference

<?php
if (isset($_POST['search'])) {
    $response = "<ul><li>No data found!</li></ul>";


    $connection = new mysqli('localhost', 'root', 'admin', 'logigestion');
    $q = $connection->real_escape_string($_POST['q']);

    $sql = $connection->query("SELECT ref FROM articles WHERE ref LIKE '%$q%'");
    if ($sql->num_rows > 0) {
        $response = "<ul>";

        while ($data = $sql->fetch_array())
            $response .= "<li>" . $data['ref'] . "</li>";

        $response .= "</ul>";
    }


    exit($response);
}
?>


<table class="table-sortable" id="editor_tab">
    <tbody>
        <tr id="addr0" data-id="0" class="hidden">
            <td data-name="ref">
                <input type="text" name='ref0' id="ref" />
                <div id="result"></div>
            </td>
            <td id="price" data-name="price">
                <input type="number" name="Price0" class=" price">
            </td>
            <td id="quantite" data-name="quantite">
                <input type="number" name="quantite0" class="quantite">
            </td>
            <td data-name="del">
                <button name="del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'><span
                        aria-hidden="true">×</span></button>
            </td>
        </tr>
    </tbody>
</table>

    <a id="Ajouter_ligne" class="btn btn-primary float-right">ADD ROW</a>

    <tr>
        <th class="text-center">Total</th>
    </tr>

    <tr>
        <th class="text-center" id="total_price"></th>
    </tr>
</table>


<script>
$(document).ready(function (){

    $("table").on("input", function (){

        $("tbody tr").each(function (){

            $this = $(this);

            $this.find(".total_row").val(+$this.find(".quantite").val() * +$(this).find(
                ".price").val());

            $("#total_price").text(0);

            $(".total_row").each(function (){
                if (this.value != "")
                    $("#total_price").text(parseInt($("total_price").text()) + parseInt($(
                        this).val()));
            });

        });

    });
    $("#add_new_row").on("click", function (){

        var newid = 0;
        $.each($("#editor_tab tr"), function (){
            if (parseInt($(this).data("id")) > newid) {
                newid = parseInt($(this).data("id"));

            }

        });
        newid++;

        var tr = $("<tr></tr>", {
            id: "addr0" + newid,
            "data-id": newid
        });

        $.each($("#editor_tab tbody tr:nth(0) td"), function (){
            var td;
            var cur_td = $(this);

            var children = cur_td.children();

            // add new td and element if it has a nane
            if ($(this).data("name") !== undefined) {

                td = $("<td></td>", {
                    "data-name": $(cur_td).data("name")
                });

                var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
                c.attr("name", $(cur_td).data("name") + newid);
                c.appendTo($(td));
                td.appendTo($(tr));
            } else {

                td = $("<td></td>", {
                    'text': $('#editor_tab tr').length
                }).appendTo($(tr));
            }


        });

        $("<td></td>").append(
            $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
                .click(function (){
                    $(this).closest("tr").remove();
                })
        ).appendTo($(tr));


        $(tr).appendTo($('#editor_tab'));

        $(tr).find("td button.row-remove").on("click", function (){

            $(this).closest("tr").remove();
        });


    });
    var fixHelperModified = function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();

        $helper.children().each(function (index) {
            $(this).width($originals.eq(index).width())
        });

        return $helper;
    };
    $(".table-sortable tbody").sortable({
        helper: fixHelperModified
    }).disableSelection();
    $(".table-sortable thead").disableSelection();
    $("#add_new_row").trigger("click");

    $("#ref").keyup(function (){
        var query = $("#ref").val();

        if (query.length > 2) {
            $.ajax({
                url: 'add_product.php',
                method: 'POST',
                data: {
                    search: 1,
                    q: query
                },
                success: function (data) {
                    $("#result").html(data);
                },
                dataType: 'text'
            });
        }
    });
    $(document).on('click', 'li', function (){
        var articles = $(this).text();
        $("#ref").val(articles);
        $("#result").html("");
    });
});
</script>

1 réponse

Messages postés
33695
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 octobre 2021
3 765
Bonjour,

Quand tu parles d'autocomplete .. tu veux dire.. une requête ajax ?
celle la ?

    $("#ref").keyup(function (){
        var query = $("#ref").val();

        if (query.length > 2) {
            $.ajax({
                url: 'add_product.php',
                method: 'POST',
                data: {
                    search: 1,
                    q: query
                },
                success: function (data) {
                    $("#result").html(data);
                },
                dataType: 'text'
            });
        }
    });

Donc, cette fonction est activée lorsqu'on tape (on relache la touche plus exactement) au clavier lorsque l'on est dans le champ identifié par son id : ref
Quand tu ajoutes une seconde ligne... comment penses tu identifier le champ sur lequel doit s'appliquer ton autocomplete ?

Tu sais qu'un ID ( *id=identifiant) ...se doit d'être unique ...
Si tu veux pouvoir cibler plusieurs éléments, là il faut mieux utiliser une class.
Et comme tu ajoutes des lignes dynamiquement, il faut également penser à rattacher " l'event " (onkeyup) sur le nouveau champ
Merci beaucoup pour ton aide ,Est ce possible de me dire comment je rattache la Div ou le resultat s’affiche sur le nouveau champ de tel sorte que ça se reproduise sur la nouvelle ligne