Recherche jQuery sur une grande page HTML

J'ai une tâche à accomplir pour le travail. J'ai une page HTML avec une table de produits. Je dois présenter une boîte de recherche qui permet à l'utilisateur d'entrer un produit à rechercher, puis utiliser jQuery pour rechercher des mots qui correspondent dans la page, puis les attacher dans un div au-dessus du tableau et saisir le href auquel ils sont liés .Recherche jQuery sur une grande page HTML

Il n'est pas possible de faire une recherche dans la base de données car je n'ai pas accès au serveur, est-ce que quelqu'un l'a déjà fait ou vu de bonnes ressources ou des plugins? Cela semble une tâche relativement facile mais je manque de temps.

Voici le code suivant que je viens de mettre en place, fonctionne très bien, sauf que j'ai de la difficulté à comparer avec lowerCase/upperCase. Des idées.

$(document).ready(function() { 
$('#searchButton').click(function() { 
$(".searchresults").slideUp('fast', function(){ 

var arr = []; 
var htmlsbr = "Your Search Results:<br />"; 

$('a:contains("' + $('#searchText').val() + '")').each(function() { 
            arr.push($(this).text()+";"+$(this).attr('href')); 
}); 

$.each(arr, function(index, value) { 
htmlsbr = htmlsbr + '<p><a href="'+value.split(';')[1]+'" name="'+value.split('; ')[0]+'">'+value.split(';')[0]+'</a></p>'; 
}); 

$(".searchresults").append(htmlsbr).slideDown('slow'); 

}).html(' '); 
}); 
}); 

</script> 
<style> 
p {color: brown;} 
p.highlight {background-color: orange;} 
body {background-color: beige;} 
</style> 
</head> 
<body> 
<div class="searchresults"></div> 
<input id="searchText" value="second" /> 
<button id="searchButton">Search</button> 
<p><a href="http://google.com" rel="this is the first entry.">This is the first entry. </a></p> 
<p><a href="http://ebay.com" rel="this is the second entry">This is the second entry. </a></p> 
<p><a href="http://msn.com" rel="this is the third entry.">This is the third entry. </a></p> 
<p><a href="http://yahoo.com" rel="this is the fourth entry.">This is the fourth entry. </a></p>'

Source

2011-10-19 HomeBrew

Vous pouvez utiliser le jQuery Replace Text plugin

Exemple (non testé) -

jQuery('selector').replaceText($("#yourtextbox").val(),function (str) { 
    //do your stuff 
}));

Source

2011-10-19 09:26:43 ipr101

Quicksearch plugin pourrait faire le travail.

Source

2011-10-19 09:24:56 mamoo

Merci, malheureusement, je préfère utiliser quelque chose de plus léger car il a besoin de travailler dans IE6. – HomeBrew

Recherche jQuery sur une grande page HTML

Répondre

Questions connexes