Bonjour,

Voici mon questionnement, après de longues recherches sur la Toile. Je souhaiterais en fait créer un formulaire de recherche avec Ajax. Voici son fonctionnement :

J’aimerai donc que lorsque l’on entre du texte dans le champ recherche (dans l’input où c’est maqué compta), la recherche s’actualise automatiquement en bas, que le chiffre du nombre de résultat s’actualise et que le texte « Résultats pour ... » également. Le seul problème, je n’arrive pas à trouver comment le faire avec Ajax. Je sais utiliser la fonction $(#id).val(), pour récupérer la valeur, mais après comment faire pour  faire correspondre avec la fonction $(#id).html() pour modifier le contenu de la recherche, alors que ce sont pleins de petites boîtes (carrés blancs, formant une liste)... ?

<?php if(isset($_GET['searchtext']) AND !empty($_GET['searchtext'])) { while($c = $contents->fetch()) { ?>
                        <div class="col-md-4">
                            <a href="<?= $c['link']; ?>" class="block">
                                <div class="feature feature-1 boxed boxed--border">
                                    <h6 class="type--uppercase color--primary"><?= $c['type']; ?></h6>
                                    <h5><?= $c['title']; ?></h5>
                                    <p>
                                        <?= substr($c['text'], 0, 70).'...'; ?>
                                    </p>
                                </div>
                                <!--end feature-->
                            </a>
                        </div>
						<?php } } ?>

Ma partie affichage des résultats dans search.php

Et ci-dessous ma partie Ajax :

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

                            $("#submit").click(function{

                                $("#type").val(),  // Nous récupérons la valeur de nos inputs
$("#title").val(),
                                $("#text").val()
                                    },

                                    function(data){
                                        $("#feature").html(data);
                                    },

                                    'text'
                                );

                            });

                        });
                    </script>

Merci énormément pour votre aide

Louis

-
Edité par LoulouGrange 14 décembre 2018 à 18:57:19

Salut,

J'ai l'impression que tu est sur un projet professionnel, vu le visuel que tu montre.

je vais donc adapter ma réponse,

si ça avait été pour un tuto, j'aurai proposé quelque chose de plus simple,

type concaténation de chaines de caractères.

La meilleure façon de faire, c'est de générer le html, via des templates, coté client en javascript.

Il existe pour ça des moteurs de templates. Personnellement j'utilise Handlebars, mais il y a aussi mustache et pleins d'autres.

Le principe général, c'est que tu va écrire ton html, avec en plus des balises non html, pour tes variables et tes structures de contrôles, type if  ( qui utilisent des caractères spéciaux (@{{ id }} ce genre de choses). Le moteur va suivre tes instructions et générer le html lorsque tu le lui demandera dans ton js, tu n'aura plus qu'a dumper le html dans ta div, et le tour sera joué.

exemple : 

<script id="entry-template" type="text/x-handlebars-template">
    {{#each features as |feature featureIndex|}}
    <div class="col-md-4" id="feature-{{ featureIndex }}">
        <a href="{{ feature.link }}" class="block">
            <div class="feature feature-1 boxed boxed--border">
                <h6>{{ feature.type }} </h6>
                <h5>{{ feature.title }}</h5>
                <p>
                    {{ feature.text }}
                </p>
            </div>
        </a>
    </div>
    {{/each}}
</script>

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {features:[...]};
var html    = template(context);

Une fois que tu as le html généré, tu peut le mettre ou tu veux.

-
Edité par lk77 14 décembre 2018 à 22:04:53

Salut,

Merci de ton adaptation

Mais du coup, je me suis un peu plus renseigné sur la méthode que tu développes. Mais est-il possible d’effectuer ces template avec une table SQL, soit que lorsque l’on entre une lettre dans l’input, les résultats s’actualisent en fonction de ma table SQL, et non d’un fichier HTML fixe... ?

Merci de ton aide

-
Edité par LoulouGrange 15 décembre 2018 à 10:43:33

Pour cela, il faut faire une requête a ton backend :

https://jsfiddle.net/lk77/z8f1aogp/

A toi après de renvoyer la réponse json qui va bien coté serveur.

Pour les requêtes ajax en js pur :

https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest

ça dépend si tu utilise jquery ou pas après, tu peut faire ça beaucoup plus simplement avec $.ajax

Il faut aussi que du déclenche cette requête lorsque l'utilisateur à fini de taper dans le champs de recherche / clique sur le bouton submit / presse la touche enter

Dans le jsfiddle, j'envoie le texte du champs de recherche, mais les données ne sont pas filtrées réellement, c'est au serveur de prendre en compte la recherche et de te renvoyer les bons résultats

-
Edité par lk77 15 décembre 2018 à 13:28:37