8768 sujets

Développement web côté serveur, CMS

Autocompletion API

Bonjour,
J'aimerai s'il est possible d'obtenir une autocompletion en utilisant une API.
J'ai un site sur le cinéma doté d'un champ de recherche tout à fait classique (https://www.cine-phil.fr).

La recherche se décompose en 3 pages PHP.
La première page est le formulaire de recherche classique.
Lorsque le visiteur tape sa recherche et la valide il est renvoyé vers une page PHP lui donnant tous les résultats correspondant à sa recherche.
Une fois qu'il a trouvé le titre ou la personne qui l'intéresse, il n'a qu'a cliquer dessus pour ouvrir la page du film ou de la personne désirée

Je souhaiterai que, lorsqu'il tape ce qu'il recherche, il ait des propositions liées à ce qu'il tape (de façon à ce qu'il n'ait pas à tout taper entièrement).
J'ai fait des recherches sur le net j'ai trouvé des résultats en fonction d'une base de données mysql mais pas d'une API.
Est-ce possible ?
Merci
Michel
Salut

En faite, peut importe d'où vient la data, d'une bdd, d'une api, d'un fichier.. le principe reste le même; tous ce passe côté front au final.

Voici un exemple jquery que j'utilise : 

$(document).ready(function(){
    // Lorsque l'utilisateur tape dans le champ de recherche
    $("#searchInput").on("input", function(){
        // Récupérer le terme de recherche
        var searchTerm = $(this).val();
        
        // Envoyer une requête à l'API d'autocomplétion (ex. Algolia)
        $.get("URL_DE_L_API?query=" + searchTerm, function(data){
            // Afficher les suggestions dans la div appropriée
            $("#suggestions").html("");
            data.forEach(function(suggestion){
                $("#suggestions").append("<div class='suggestion'>" + suggestion + "</div>");
            });
        });
    });

    // Lorsque l'utilisateur sélectionne une suggestion
    $(document).on("click", ".suggestion", function(){
        // Remplir le champ de recherche avec la suggestion sélectionnée
        $("#searchInput").val($(this).text());
        
        // Vous pouvez également rediriger l'utilisateur vers la page de résultats ici
    });
});


à adapter pour que ton résultat s'affiche par exemple dans une balise <select>
Modifié par JENCAL (03 Jan 2024 - 10:18)
J'ai essayé ton code JENCAL, visiblement le data.forEach pose problème (j'ai le message suivant, forEach is not a function)

JENCAL a écrit :
Salut

En faite, peut importe d'où vient la data, d'une bdd, d'une api, d'un fichier.. le principe reste le même; tous ce passe côté front au final.

Voici un exemple jquery que j'utilise : 

$(document).ready(function(){
    // Lorsque l'utilisateur tape dans le champ de recherche
    $("#searchInput").on("input", function(){
        // Récupérer le terme de recherche
        var searchTerm = $(this).val();
        
        // Envoyer une requête à l'API d'autocomplétion (ex. Algolia)
        $.get("URL_DE_L_API?query=" + searchTerm, function(data){
            // Afficher les suggestions dans la div appropriée
            $("#suggestions").html("");
            data.forEach(function(suggestion){
                $("#suggestions").append("&lt;div class='suggestion'&gt;" + suggestion + "&lt;/div&gt;");
            });
        });
    });

    // Lorsque l'utilisateur sélectionne une suggestion
    $(document).on("click", ".suggestion", function(){
        // Remplir le champ de recherche avec la suggestion sélectionnée
        $("#searchInput").val($(this).text());
        
        // Vous pouvez également rediriger l'utilisateur vers la page de résultats ici
    });
});


à adapter pour que ton résultat s'affiche par exemple dans une balise &lt;select&gt;

Modifié par michelweb (10 Jan 2024 - 10:15)
Bon j'ai résolu le problème du forEach (je n'ai plus le message d'erreur dans la console) mais bon l'autocompletion ne fonctionne pas ...
Modérateur
Bonjour,

Pour le champ de recherche qui est juste sous le titre en haut de la page https://www.cine-phil.fr/fr/ la balise dans ton code est un <input> avec l'attribut autocomplete="off". Ça n'aide pas à faire marcher l'auto-complétion ! Supprime cet attribut ou met "on" à la place de "off", ça devrait aller mieux.

Normalement, on n'a pas besoin de javascript si on se contente de l'auto-complétion de base proposée par le navigateur. Par ailleurs, on notera que la manière dont se fait exactement l'auto-complétion peut dépendre des navigateurs.

Amicalement,
Merci pour ta réponse. En fait je n'avais pas implémenté le script sur le site, je l'avais fait en local sur mon pc (sans l'autocompletion="off"). Même le retirant ou en le mettant sur "on" ça ne fonctionne pas. J ai du me tromper dans le script je pense.

En fait l'autocomplétion de base est valable lorsque le titre a déjà été tapé. Moi j'aimerai faire de l'autocomplétion pour tous les titres de l'API (même ceux qui n'ont jamais été tapés par le visiteur).
Les sites que j'avais consultés recommandaient de mettre un autocompletion="off" pour implémenter un javascript d'autocomplétion
Modifié par michelweb (11 Jan 2024 - 17:56)
Modérateur
Bonjour,

michelweb a écrit :
Merci pour ta réponse. En fait je n'avais pas implémenté le script sur le site, je l'avais fait en local sur mon pc (sans l'autocompletion="off"). Même le retirant ou en le mettant sur "on" ça ne fonctionne pas. J ai du me tromper dans le script je pense.

En fait l'autocomplétion de base est valable lorsque le titre a déjà été tapé. Moi j'aimerai faire de l'autocomplétion pour tous les titres de l'API (même ceux qui n'ont jamais été tapés par le visiteur).
Les sites que j'avais consultés recommandaient de mettre un autocompletion="off" pour implémenter un javascript d'autocomplétion

Si tu as besoin d'une auto-complétion avec des données autre que celles entrées par l'utilisateur, oui, tu as raison, il faut un script, et il faut mettre autocomplete à "off".

EDIT: le script de jencal ne marche pas tel quel. Il faut l'adapter, il faut y mettre un requête que l'API comprenne, il faut que l'API soit capable de renvoyer quelque chose d'utilisable par ce script, et il faut que le script affiche le résultat au bon endroit. Ça nécessite donc de comprendre dans le détail ce que fait le script, pas juste faire un copier-coller.

Amicalement,
Modifié par parsimonhi (11 Jan 2024 - 18:38)
parsimonhi a écrit :
Bonjour,


Si tu as besoin d'une auto-complétion avec des données autre que celles entrées par l'utilisateur, oui, tu as raison, il faut un script, et il faut mettre autocomplete à "off".

EDIT: le script de jencal ne marche pas tel quel. Il faut l'adapter, il faut y mettre un requête que l'API comprenne, il faut que l'API soit capable de renvoyer quelque chose d'utilisable par ce script, et il faut que le script affiche le résultat au bon endroit. Ça nécessite donc de comprendre dans le détail ce que fait le script, pas juste faire un copier-coller.

Amicalement,

Oui je le sais bien, je ne me contente pas d'un copier/coller de "demeuré"
Dans ce script j'ai remplacé le #searchInput par l'id de mon input, j'ai mis l'url de recherche de mon API dans le $.get (url qui fonctionne puisque la recherche sans auto-complétion fonctionne).
Après j'ai peut-être omis une modification je ne sais pas
Modérateur
Bonjour,

michelweb a écrit :
Dans ce script j'ai remplacé le #searchInput par l'id de mon input

OK

michelweb a écrit :
j'ai mis l'url de recherche de mon API dans le $.get (url qui fonctionne puisque la recherche sans auto-complétion fonctionne).

As-tu essayé d'afficher (provisoirement) dans une <div> ou dans la console ce que renvoie ton api pour bien vérifier ce qu'elle renvoie ? Ça ressemble à quoi ? Une liste de mots ?

michelweb a écrit :
Après j'ai peut-être omis une modification je ne sais pas

Bah tu as peut-être omis des trucs, mais c'est à vérifier. Tu affiches où les résultats renvoyés par l'API ? Dans le script de jencal, il s'agit d'une balise HTML ayant pour id "suggestions" dans laquelle on rajoute des <div>. Cette balise ayant pour id "suggestions", soit dit en passant, aurait pu être une balise <datalist> dans laquelle on aurait rajouté des balises <option> comme dans l'exemple donné par comar91 un peu plus haut, au lieu d'y ajouter des <div>. Parce que bon, comme je dis souvent, il ne devrait pas (ou presque pas) y avoir de <div> dans un code html. C'est le signe d'une erreur sémantique dans la plupart des cas.

Amicalement,
Modifié par parsimonhi (11 Jan 2024 - 19:43)
Prévenir un modérateur
Répondre au sujet
Aller à