CODEWITHSUNDEEP
javascriptjquery
Rod
Rod

Reputation: 15475

need help speeding up tag cloud filter for IE

Any ideas on how to speed this up in IE (the filtering process performs decent in Firefox, but almost unusable 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>&nbsp;</span>');
}
</script>
</div>

</body>
</html>

thanks, rodchar

Upvotes: 2

Views: 160

Answers (4)

Pointy
Pointy

Reputation: 413866

Since the tags should be unique (it shouldn't make sense to have the tag "awesome" in the cloud twice), give each span an "id" value based on a cleaned-up version of the tag string (replace spaces with underscores, etc etc). That should make things a lot faster, because the filter can just go by "id" value.

In fact, you don't even need a filter: just hide all the <span> elements in the cloud, and then show the one with the "id" value formed from the current field value. If there isn't one, then there isn't one, but if there is, that'll be very fast.

Upvotes: 1

Tgr
Tgr

Reputation: 28200

  • avoid the child selector, it is slow.
  • selecting based on contained text is probably even slower. Either use class names to store tag information or build some sort of data structure in javascript (take a look at the jQuery data() function).
  • no need to show and then re-hide almost all spans. Use the :visible selector.
  • it might help to detach() #cloudDiv and the append() it back after you made your changes.
  • you might consider setting a timer on keyup instead of instantly showing/hiding stuff. That way you can wait for the user to finish typing.

Upvotes: 1

alex
alex

Reputation: 490461

As well as what derek says, consider using jQuery's append() method (or at least the non jQuery equivalent).

Upvotes: 1

derek
derek

Reputation: 4886

instead of doing 1300 document.writes, try creating a concatenated string and do 1 write. This may help if it's the document.writes that are slowing down IE.

Upvotes: 2

Related Questions