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?
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. =)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With