11521 sujets

JavaScript, DOM et API Web HTML5

Recherche de texte dans une page par surlignement avec Jquery

Bonjour,

Ci dessous le code de la page.
Le texte recherché est pour le moment saisi dans 
<input type="text" id="filter" >

Je souhaiterai saisir le texte dans une liste déroulante du type :

<form>
<select id="filter" size="1">
<option>&nbsp;&nbsp;&nbsp;
<option>option_1
<option>option_2
<option>option_3
<option>option_4
</select>
</form>


J'ai bien repris l'id="filter" afin d'appeler la fonction"jQuery(document).ready(function()" placer dans le script en bas du code de la page mais cela ne fonctionne pas.Il y a certainement un point que je n'ai pas bien compris.

Merci pour votre aide ou pour une proposition d'un autre code.
Cordialement

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Surlignement de texte dans une page web</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jcfilter.min.js"> </script>
</head>
<body>
<h3>Rechercher : 
  <input type="text" id="filter" >
</h3>
<div class="jcorgFilterTextParent"> 
  <h3>This is header 1</h3>
  <div class="jcorgFilterTextChild"> Hac magnis? Ac dignissim nec! Phasellus aliquet magnis nisi, cursus. 
    Habitasse mauris velit. Lacus! Augue scelerisque odio dolor, ultricies cursus? Magna! Integer nunc 
    odio, integer lacus, nec turpis </div>
</div>
<div class="jcorgFilterTextParent"> 
  <h3>This is header 2</h3>
  <div class="jcorgFilterTextChild"> blah blah blah blah blah blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah blah </div>
</div>
<div class="jcorgFilterTextParent"> 
  <h3>This is header 3</h3>
  <div class="jcorgFilterTextChild"> what the what the what the what the what the what the what the what 
    the what the what the what the what the what the what the what the what the what the what the what 
    the what the what the what the what the what the </div>
</div>
<div class="jcorgFilterTextParent"> 
  <h3>This is header 4</h3>
  <div class="jcorgFilterTextChild"> are you serious? are you serious? are you serious? are you serious? 
    are you serious? are you serious? are you serious? are you serious? are you serious? are you serious? 
    are you serious? are you serious? are you serious? are you serious? are you serious? are you serious? 
    are you serious? are you serious? are you serious? are you serious? are you serious? </div>
</div>
<script type="text/javascript">
       jQuery(document).ready(function(){
          jQuery("#filter").jcOnPageFilter({animateHideNShow: true,
                    focusOnLoad:true,
                    highlightColor:'yellow',
                    textColorForHighlights:'#000000',
                    caseSensitive:false,
                    hideNegatives:true,
                    parentLookupClass:'jcorgFilterTextParent',
                    childBlockClass:'jcorgFilterTextChild'});
       });          
       </script></div>
</body>
</html>
Bonjour,

Finalement j'ai trouvé et adapté un code qui fonctionne très bien.
Voir le code ci-dessous.

Cordialement

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Recherche de texte dans une page web</title>
<style type="text/css">
.highlight {
    background-color: #fff34d;
    -moz-border-radius: 5px; /* FF1+ */
    -webkit-border-radius: 5px; /* Saf3-4 */
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.highlight {
    padding:1px 4px;
    margin:0 -4px;
}
</style>
</head>
<body>
<form>
  <select id="text-search" size="1">
    <option>&nbsp;&nbsp;&nbsp; 
    <option>dolor 
    <option>blah 
    <option>what 
    <option>serious 
  </select>
</form>
<p>Hac magnis? Ac dignissim nec! Phasellus aliquet magnis nisi, cursus. Habitasse mauris velit. Lacus! 
  Augue scelerisque odio dolor, ultricies cursus? Magna! Integer nunc odio, integer lacus, nec turpis</p>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
  blah blah</p>
<p>what the what the what the what the what the what the what the what the what the what the what the 
  what the what the what the what the what the what the what the what the what the what the what the what 
  the what</p>
<p>theare you serious? are you serious? are you serious? are you serious? are you serious? are you serious? 
  are you serious? are you serious? are you serious? are you serious? are you serious? are you serious? 
  are you serious? are you serious? are you serious? are you serious? are you serious? are you serious? 
  are you serious? are you serious? are you serious?</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(function() {
    $('#text-search').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) {
            // highlight the new term
            $('body').highlight( searchTerm );
        }
    });
});
</script>
</body>
</html>
Smiley ravi
Sujet clos
Aller à