« back to discussion

For no reason at all - javascript to filter names list

Because why the hell not, I decided to write some javascript to filter a list of names as you type into an input box. I wanted it to show all names that contain ALL of the chars the user inputs.

I've got it to do that: http://jsfiddle.net/tTzc6/

My next mission is to get it to order the list by names that have more "runs" of matching chars,
for example if you have Dean and Dave then for the search Dea, Dean should come first, but for Dav, Dave should come first. I think I know what I need to do so I'm going to try it.

over 3 years ago, by wsg

9 Replies

pineapple

Here's something for your journey

http://pineapple.io/resources/relevancy-js

I think one great improvement would be to not use jQ :)

pineapple, over 3 years ago

wsg
posted by pineapple on Sun, Mar 31 at 11:38AM

Here's something for your journey

http://pineapple.io/resources/relevancy-js

I think one great improvement would be to not use jQ :)

Yeah I'll have to be brave and give that a go. I've never really tried to do much without using JQ because I hate all the cross-browser shit I have to worry about.

wsg, over 3 years ago

pineapple
posted by wsg on Sun, Mar 31 at 11:48AM
posted by pineapple on Sun, Mar 31 at 11:38AM

Here's something for your journey

http://pineapple.io/resources/relevancy-js

I think one great improvement would be to not use jQ :)

Yeah I'll have to be brave and give that a go. I've never really tried to do much without using JQ because I hate all the cross-browser shit I have to worry about.

Yeah, that is the shite part, but really important if you plan to do stuff with like thousands of items ;/

There was a really REALLY good resource but I can't seem to find it. I don't think I added it to pineapple because it was so 'small', but it was basically the most lightweight, performant autocompleter I've ever seen. When in a benchmark with jquiery ui autocomplete it was a joke, like 15,000% faster or something insane.

pineapple, over 3 years ago

pineapple
posted by lush on Sun, Mar 31 at 12:13PM

http://pineapple.io/resources/typeahead-js

awww sheeeit, my twitta

pineapple, over 3 years ago

wsg

I'm glad you challenged me to do that. Managed to do it in pure JS (minus the bolding up to now) http://jsfiddle.net/BAcbd/3/

not sure if it performs any better though with only those few names.

wsg, over 3 years ago

SkinnyGeek1010

Cool! You could try and run them on jsperf if you were interested in how much faster it is. I'm somewhat of a performance junkie so I find this to be a game of sorts lol.

Yea you should always try to use that vanilla whenever you can (especially on side projects), even though it can be more of a pain. I try to only use jQuery for cross browser DOM querying and AJAX. It can be helpful to keep jQuery's source code open and search for .parent or w/e to see how you would do it with jQuery.

For example, using a more verbose for loop instead of .each is a bazillion times faster than a function call. Also keep the DOM in mind... every time you have to touch that thing it will kill your performance, If you can cache a piece of the DOM, even better.

I haven't grokked the code thoroughly, but on every key up it's grabbing all the li's and stashing in items. This is going to be muuuch slower than assigning it outside of the event listener once.

SkinnyGeek1010, over 3 years ago

wsg

I haven't grokked the code thoroughly, but on every key up it's grabbing all the li's and stashing in items. This is going to be muuuch slower than assigning it outside of the event listener once.

Ah yes very good point I'll be sure to fix that little oversight!

EDIT: This should do it : http://jsfiddle.net/q558T/

wsg, over 3 years ago


Login or to comment.

« back to discussion

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.