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>