Super Fast / Efficient jQuery Live Search

This is a DOM live search on some data you already have on the page. This does NOT go back to some server or database. The TRICK here is to use the jQuery attributes contains selector

Category:

Science & Technology

Tags:

• fast
• efficient
• jquery
• live
• search
• dom
• javascript
• filter
• type
• keyup
• as you type
• live search
• jquery live search

[kriogenx0]

this is retarded. you should be searching a values in a javascript array.

[optikalefxx]

@kriogenx0 Although your comment was kind of asshole-like. You have a good point. But I would have to have unique IDs on all the elements, and store those in the array so they can be immediately targeted.

[kriogenx0]

@optikalefxx Why would you need unique ids? It'd be best to parse all the DOM elements into an array of objects, or array of values. Then search that. You would cache that array for future searches as well, in case the user changes that search.

[optikalefxx]

@kriogenx0 Sure you could cache each of the DOM elements in the array, but that means you still have to loop through the UL at least once to get each DOM object. Which is still probably faster.

[limited06]

Isn't it bad practice to use custom attributes on HTML tags?

[optikalefxx]

@limited06 kinda, its against the spec. If you like you can just add data- infront and then your valid html5 again

[huhoicutube]

Cool. How about highlighting what you typed within the search result text?

[10048902]

yeah, it will be good if you don't have to support the "SHITTY" browsers like "FIREFOX" or ie.

in the end, it is such an easy task that i don't think older IEs can't handle with speeds. Not to mention Firefox.

[Osteele]

Another extremely valuable tutorial Sean. Thanks for sharing it with the rest of us.

[deoadonis]

@RTStaniforth thanks