var searchtext = ""; var searchIndice = 0; $(function() { $('#textsearch').keypress(function(event) { return doSearch(event, $(this)); }); }); function doSearch(event, input) { // annule $('#cadreTree a').css("background", ""); $('#nbOccur').html(""); var code = event.keyCode || event.which; if (code == 13) { var valeurTxt = input.val(); if(searchtext == "") // 1er coup { searchtext = valeurTxt; searchIndice = 0; } else { if(searchtext == valeurTxt) { } else { searchIndice = 0; /// re-init } } if(valeurTxt.length > 3) { // récupere a en question var aHiglight = $('#cadreTree a:icontains("' + valeurTxt + '")'); if(aHiglight != null) { aHiglight.css("background", "#F3EE33"); if(searchIndice >= aHiglight.length) // redemarre a 0 si l'indice demandé est supérieur aux resultats searchIndice = 0; var leBon = aHiglight[searchIndice]; searchIndice++; // position du scrool + position absolu de l'element surbrillance - le début du div englobant $("#cadreTree").scrollTop($("#cadreTree").scrollTop() + $(leBon).position().top - $("#cadreTree").position().top); $('#nbOccur').html(searchIndice + " sur " + aHiglight.length); } } return false; } return true; } $.extend($.expr[":"], { "icontains": function(elem, i, match, array) { return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } });
<div id="cadreTree"> <ul> <li><a href="#">Test 1</a></li> <li><a href="#">information</a></li> <li><a href="#">le petit chat</a></li> <li><a href="#">Test 2</a></li> </ul> </div> <input type="text" id="textsearch" > <label id="nbOccur" > </label>