Geek Answers Handbook

Quick search through a large list using jQuery

I use this code to search about 500 li tags.

$(function() { $.expr[":"].containsInCaseSensitive = function(el, i, m){ var search = m[3]; if (!search) return false; return eval("/" + search + "/i").test($(el).text()); }; $('#query').focus().keyup(function(e){ if(this.value.length > 0){ $('ul#abbreviations li').hide(); $('ul#abbreviations li:containsInCaseSensitive(' + this.value + ')').show(); } else { $('ul#abbreviations li').show(); } if(e.keyCode == 13) { $(this).val(''); $('ul#abbreviations li').show(); } }); });

And here is the HTML:

 <input type="text" id="query" value=""/> <ul id="abbreviations"> <li>ABC<span>description</span></li> <li>BCA<span>description</span></li> <li>ADC<span>description</span></li> </ul>

This script is very slow with these many li tags.

How can I do this faster and how can I only search for ABC text in li and not span tags (without changing html)?

I know about existing plugins, but I need a small implementation like this.

Here is a ready-made code for anyone interested

 var abbrs = {}; $('ul#abbreviations li').each(function(i){ abbrs[this.firstChild.nodeValue] = i; }); $('#query').focus().keyup(function(e){ if(this.value.length >= 2){ $('ul#abbreviations li').hide(); var filterBy = this.value.toUpperCase(); for (var abbr in abbrs) { if (abbr.indexOf(filterBy) !== -1) { var li = abbrs[abbr]; $('ul#abbreviations li:eq('+li+')').show(); } } } else { $('ul#abbreviations li').show(); } if(e.keyCode == 13) { $(this).val(''); $('ul#abbreviations li').show(); } });
+4
source share
4 answers

First, drag all the objects into the object:

 var abbrs = {}; $("ul#abbreviations li").each(function (i) { abbrs[this.firstChild.nodeValue] = this; });

Then find the printed text in your object:

 var li = abbrs[this.value.toUpperCase()]; // show li, hide others

Update:. For partial matches, you will have to iterate over the collection:

 var filterBy = this.value.toUpperCase(); for (var abbr in abbrs) { if (abbr.indexOf(filterBy) !== -1) { var li = abbrs[abbr]; // show li } }
+7
source

To start, I used new RegExp instead of eval and looked to see if the performance was improved.

I assume you are dynamically populating li tags. Is there a way to search for a data structure from which this list is populated directly, and not to search for DOM objects? If my assumption is wrong, can you iterate over the list at the beginning and build an array of strings that can then be found?

Edit: this is how you can create a list of strings

 var listTerms = []; $("ul#abbreviations li").each(function (li) { listTerms.push({text : li.firstChild.nodeValue, elem : li}); });

Here you can search (simple loop, nothing unusual)

 var exp = new RegExp(text, "i"); for(var i=0; i<listTerms.length; i++) { if (exp.match(listTerms[i].text)) { $(listTerms[i].elem).hide(); } }
+2
source

I am not a javascript encoder or familiar with jquery, but I had a similar problem some time ago with the js eye-candy directory tree to suggest a project specification.

Regular expression is obviously your bottleneck. Is javascript efficient array processing functions and not the full regular expression overhead? Is the <li> already parsed in the DOM array when HTML is parsed when loading a document? It should just be to lay the DOM tree on these <li> nodes by copying them into an array, and then use the find_value function for the resulting array to find the value.

0
source

I also found this link very useful, you should check it out. Well here: " Direct HTML search using jQuery - no plugins

0
source

More articles:


All Articles