Bonjour, je vais essayer d'être le plus clair possible
J'ai un site ou je liste des fichiers en php, j'ai réussi à mettre un barre de recherche qui renvoie sur la même page, avec une variable GET, que j'utilise ensuite en pregmatch et qui va donc afficher uniquement les résultats qui "match". C'est tout fonctionnel.
Ce que j'aimerais maintenant, c'est que ce script avec la variable GET du pregmatch se refresh au moment ou je commence à taper dans la barre de recherche, et donc sans actualiser la page ou quoi que ce soit. Je sais que c'est possible puisque je l'ai déjà vu, puis tout est possible en programmation.
J'ai essayé de me renseigner mais j'ai pas vraiment réussi à trouver ce qu'il me fallait. Je sais qu'il faut utiliser Javascript ou ajax, chose que je ne connais pas du tout.
Quelqu'un ?

http://codepen.io/BadPinkChicken/pen/LGXaLM

Avec quelques modifications tu peux aisément faire ce que tu veux

tu charge un fichier php pour les resultats, tu met le contenu de la barre de recherche dans une variable et tu rafraichis la div en ajax

Le 09 février 2016 à 21:48:17 moxo75 a écrit :
http://codepen.io/BadPinkChicken/pen/LGXaLM

Avec quelques modifications tu peux aisément faire ce que tu veux

Faudrait que je refasse tout mon code, ce qui me convient pas trop, mais merci quand même

Le 09 février 2016 à 22:26:30 h_benarfa a écrit :
tu charge un fichier php pour les resultats, tu met le contenu de la barre de recherche dans une variable et tu rafraichis la div en ajax

Tu pourrais essayer de m'expliquer d'avantage ? Je connais pas dut tout ajax
Et comment je mets le texte dans une variable ? actuellement j'utilise un formulaire en GET en fait

Google a sûrement un Json qui traine dans ses archives avec à peu près tout les mots possibles
Suffit de faire appel à ce dernier via une requête $.Ajax

Bon j'ai l'impression que pas tout le monde a bien compris ce que je voulais. Jvais essayer d'être encore plus clair

J'aimerais qu'au moment où je rentre une lettre, la liste commence à filtrer les éléments

La barre de recherche :

<div class="flexsearch">
        <div class="flexsearch--wrapper">
            <form class="flexsearch--form" action="liste.php" method="get">
                <div class="flexsearch--input-wrapper">
                    <input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
                    <input class="flexsearch--input" type="search" name="search" placeholder="search" id="search">
                </div>
                <input class="flexsearch--submit" type="submit" value="&#10140;"/>
            </form>
        </div>
</div>

Et une partie du script qui liste avec la prise en charge de la recherche (je sais c'est ptet pas la meilleure solution mais c'est celle que j'ai trouvé, et elle est fonctionnelle.

foreach($ffs as $ff)
    {
        if(preg_match('#'.$_GET['search'].'#i', $ff))
        {

Utilise la fonction onkeyup de js qui demande en ajax à la page php si le nom est contenu dans la liste des fichiers

en effet,

la méthode difficile est
- d'appeler le fichier php sur le keyup,
- le fichier retourne la liste des résultats.
- Tu affiche la liste des résultats sous ton champ de recherche...
- tu bind des events sur les éléments.

la méthode simple c'est
-installer jquery,
- puis jqueryui et prendre l'autocomplete.

 
$( "#id_du_champ" ).autocomplete({
      source: "fichier_a_interroger.php",
      minLength: 2,  // caractère requis avant d'appeler les sources
      select: function( event, ui ) {  //fonction appelée lors de la sélection
      
      }
    });

il suffit de l'instancier sur ton champ et tu n'auras ensuite que la partie serveur à coder.

en effet,

la méthode difficile est
- d'appeler le fichier php sur le keyup,
- le fichier retourne la liste des résultats.
- Tu affiche la liste des résultats sous ton champ de recherche...
- tu bind des events sur les éléments.

la méthode simple c'est
-installer jquery,
- puis jqueryui et prendre l'autocomplete.

 
$( "#id_du_champ" ).autocomplete({
      source: "fichier_a_interroger.php",
      minLength: 2,  // caractère requis avant d'appeler les sources
      select: function( event, ui ) {  //fonction appelée lors de la sélection
      
      }
    });

il suffit de l'instancier sur ton champ et tu n'auras ensuite que la partie serveur à coder.

https://dev-jvc.deblan.org/ajax/
Source : https://gitnet.fr/deblan/tests/src/master/ajax

utilise l'event .change :

$(".flexsearch--input").change(function(){ [appel du fichier de requete avec la valeur en parametre dans l'url] });

mais blinde de sécurité par contre

Bon, j'ai continué à chercher, et j'ai plus ou moins réussi.

<input class="flexsearch--input" type="search" name="search" placeholder="search" id="search" onkeyup="refresh(this.value);">

<script>
 function refresh(inputVal){
        var searchvar = $('input[name="search"]').val();
        $("#refresh").load("liste-script.php?dir=<?php echo $_GET['dir']; ?>&search=" + searchvar);
    }
</script>

<div id="refresh">
<?php
include('liste-script.php');
?>
</div>

C'est plus ou moins fonctionnel, je m'explique :
Dans le dossier "musiques" par exemple, ca marche comme je veux (la liste s'actualise en fonction de ce que j'écris) mais dans le dossier films, je vais commencer à taper, mais ca ne s'actualise pas, tous les fichiers sont affichés. Par contre, au moment ou je rentre une lettre de trop (qui ne match avec aucun fichier), là il va actualiser et donc passer à la suite du script, à savoir afficher "Aucun résultat"

J'ai tenté plusieurs truc :
changer le lien de "destination" du refresh en mettant
$("#refresh").load("'''<u>liste.php</u>'''?dir=<?php echo $_GET['dir']; ?>&search=" + searchvar); ''(le lien de la page actuelle)'' au lieu de $("#refresh").load("'''<u>liste-script.php</u>'''?dir=<?php echo $_GET['dir']; ?>&search=" + searchvar); ''(où se trouve le script qui liste)''

Voilà j'espere avoir été assez clair, si quelqu'un a une piste ça serait cool

J'ai oublié
En faisant ça donc (changer le lien de destiantion) tout marche, mais le problème c'est que j'ai le header de la page et la barre de recherche qui s'affichent en double quoi...

Le 10 février 2016 à 19:46:26 deepblue a écrit :
https://dev-jvc.deblan.org/ajax/
Source : https://gitnet.fr/deblan/tests/src/master/ajax

Le deuxieme lien ne marche pas
Mais sinon j'aimerais juste essayer de régler mon problème, vu que j'y suis presque arrivé, et non pas tout recoder.
Si je vois vraiment que je n'y arrive pas, je le referais en utilisant une de vos solution.
Mais merci de ta réponse quand même

Le 11 février 2016 à 00:07:15 EithanR a écrit :
J'ai oublié
En faisant ça donc (changer le lien de destiantion) tout marche, mais le problème c'est que j'ai le header de la page et la barre de recherche qui s'affichent en double quoi...

Pour eviter ce problème découpe mieux tes fichiers (et ne met pas ton header dans list.php )

…ou alors on se met à utiliser les bonnes pratiques et on évite de faire ce que l'op a tenté de réaliser.

Vaudrait mieux veiller à faire les choses plus correctement et proprement parce que là..

EDIT: deep too fast

Le 11 février 2016 à 09:34:36 deepblue a écrit :
…ou alors on se met à utiliser les bonnes pratiques et on évite de faire ce que l'op a tenté de réaliser.

Bah je veux bien un lien qui me ramène pas sur un 404 alors
Et j'aimerais bien qu'on m'explique pourquoi c'est pas une bonne idée de faire ce que "l'op a tenté de réaliser"

Oops, le dépôt était privé. Au temps pour moi