Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any way to speed up this solution for a case-insensitive jQuery :contains selector?

I found this solution for a case-insensitive jQuery :contains selector on StackOverflow. It works great, however it comes at the cost of performance. Does anyone else find this solution to be a bit slow?

I'm using the :contains selector to search a table. The user types a search string into a textbox. For each keystroke, it searches the table for that string, showing only the rows that contain that string via the :contains selector. Before implementing the case-insensitive solution, this search was quick and snappy. Now with this solution, it locks up for a brief moment after each keystroke.

Any ideas on how this solution could be sped up?

like image 911
John Avatar asked Sep 10 '09 20:09

John


1 Answers

I found another solution of the case-insensitive search on Google (see Eric Phan) which varies slightly from the one I was originally using.

Original:

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;

EricPhan:

return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;

Comparing the two, you can see Eric Phan's solution accesses the DOM attributes directly and uses toLowerCase() instead of toUpperCase(). The latter doesn't really matter, but the former is what really improved the performance of the case-insensitive search. Just changing the original solution to use (a.textContent || a.innerText || "") instead of jQuery(a).text() made all the difference!

Now I'm a bit curious, so here's a follow up question: What's the deal with jQuery.text()? Why's it so slow? I have my assumptions, but I'd love to hear what the experts have to say.

Lastly, thanks to everyone who responded. I appreicate your help. =)

like image 139
John Avatar answered Sep 21 '22 12:09

John