Need help speeding up cloud tag filter for IE
Any ideas on how to speed this up in IE (the filtering process works decently in Firefox, but hardly ever used in IE). Basically, it's a tag cloud with a filter text box to filter the cloud.
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tagFilter').keyup(function(e) {
if (e.keyCode==8)
{
$('#cloudDiv > span').show();
}
$('#cloudDiv > span').not('span:contains(' + $(this).val() + ')').hide();
});
});
</script>
</head>
<body>
<input type="text" id="tagFilter" />
<div id="cloudDiv" style="height: 200px; width: 400px; overflow: auto;">
<script type="text/javascript">
for (i=0;i<=1300;i++)
{
document.write('<span><a href="#">Test ' + i + '</a> </span>');
}
</script>
</div>
</body>
</html>
thanks rodchar
a source to share
Since tags must be unique (it is not necessary to have the "awesome" tag in the cloud twice), give each range an "id" value based on the stripped-down version of the tag line (replace spaces with underscores, etc., etc.). This should make things a lot faster, because the filter can just go by the "id" value.
In fact, you don't even need a filter: just hide all the elements <span>
in the cloud, and then show the one with the "id" value formed from the current field value. If it is not there, then it is not, but if it is, it will be very fast.
a source to share
- avoid child selector, it is slow.
- The selection based on the contained text is probably even slower. Or use class names to store tag information or create some kind of data structure in javascript (look at the jQuery data () function).
- no need to show and then hide almost all gaps again. Use the: visible selector.
- it can help detach () #cloudDiv and add () back after making changes.
- you might consider setting a timer on your keyboard instead of showing / hiding stuff instantly. This way you can wait for the user input to finish.
a source to share