Forums Développement Multimédia

Aller au contenu

Une Barre de Recherche en HTML

DETENTE

2 réponses à ce sujet

#1 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 19 June 2013 - 08:51 AM

Bonjour,

Je voudrais avoir une barre de recherche par exemple dans un site HTML, quand l'utilisateur tape un mot, si ce mot existe dans un des éléments du site (nom du livre par exemple), l'élément en question va s'afficher dans les résultats, est-t-il possible de créer une barre de recherche en HTML ou en JQuery, sans passer par le php ?

Merci d'avance ^^

#2 boichu

    Administrator

  • Administrateur
  • PipPipPipPipPipPipPipPip
  • 5009 messages

Posté 19 June 2013 - 09:15 AM

salut
j'ai fait un truc du genre ici :
http://www.annecyvol...les-videos.html


<form id="live-search" action="" class="styled" method="post">
                                                <fieldset>
                                                        Rechercher une vidéo : <input type="text" class="text-input" id="filter" value="">
                                                        <span id="filter-count"></span>
                                                </fieldset>
                                        </form>
 

<script type="text/javascript">
                                                $(document).ready(function()
                                                {
                                                        $("#filter").keyup(function()
                                                        {
                                                                // Retrieve the input field text and reset the count to zero
                                                                var filter = $(this).val(), count = 0;
                                                                // Loop through the comment list
                                                                $("#listeVideo div[class=divvideo]").each(function()
                                                                {
                                                                        // If the list item does not contain the text phrase fade it out
                                                                        if ($(this).text().search(new RegExp(filter, "i")) < 0)
                                                                        {
                                                                                $(this).fadeOut();
                                                                                // Show the list item if the phrase matches and increase the count by 1
                                                                        }
                                                                        else
                                                                        {
                                                                                $(this).show();
                                                                                count++;
                                                                        }
                                                                });
                                                                // Update the count
                                                                var numberItems = count;
                                                                $("#filter-count").text(" Vidéos correspondantes : "+count);
                                                        });
                                                });
                                        </script>
 

Et apres, il faut définir correctement les blocs de résultat :

<p id="listeVideo">
  <div class="divvideo">
         contenu sur lequel s'appuie la recherche
  </div>
  <div class="divvideo">
         contenu sur lequel s'
appuie la recherche
  </div>
  <div class="divvideo">
         contenu sur lequel s'appuie la recherche
  </div>
</p>


#3 Levendivin

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 302 messages

Posté 19 June 2013 - 10:42 AM

Salut,

Sur ton lien, je vois qu'il détecte le contenu de chaque vidéo pendant la recherche.

Donc, en fait tout peut se faire en jQuery/javascript sans avoir besoin du php. Au moins c'est cool ^^
Merci. :cool:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)