Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sebastian H
Sebastian H
19,905 Points

Help designing interactive search bar...

Hey gang, I've got a project which requires the ability to set custom icons. I've got everything mocked up but just not sure which is the best way to approach the actual coding.

mock

So the use case is pretty simple, the user clicks an icon they like, jQuery sets the 'fa' code of this icon to an invisible form field and then the form submits with a text representation of the icon while the user just see's the icon visually.

My problem is the best way of filtering these icons in the first place because there are alotttt of font awesome icons. I'm aware that there are some jQuery plugins for this but none quite to my liking.

Should I:

a) create a loop which displays all of the icons and show and hide them according to the search bar inputs

b) actually use ajax to fetch the icons from the database for each incremental change in the search bar

I've never done this before, any experience/advice/links would be greatly appreciated.

1 Answer

Kevin Korte
Kevin Korte
28,149 Points

Remind me, there is about a couple hundred icons? And they don't change (add/delete) very often, right?

Sebastian H
Sebastian H
19,905 Points

There are about 500 or so now and that's right, they wouldn't change very often

Kevin Korte
Kevin Korte
28,149 Points

Okay, that's what I thought. I think I'd be tempted to put them all in an array, and filter through that array on the client side, and submit the one the client wants.

Why?

I think you'll experience much lower latency. Because the browser doesn't have send each keystroke off to a server, and wait for a response, it should seem very fast. I don't think 500 items in an array is too much to ask for a browsers to search through. It should be very efficient at that. Someone has to search through 500 records, we might as well cut out the latency part of it.

The downside, possible file size. This would require all clients to parse that big array, and if that could have a slight impact on your site's initial load time.

What I might do is try it both ways. I might generate an array of similar size and see how long the load times are, and I might generate 500 records in a database and see how long ajaxing takes. Than you would have your answer. For anyone on a slow internet connection, but are going to be slow solutions. One will be slow at the initial page load, the other will be slow during the search, pick your poison.

Sebastian H
Sebastian H
19,905 Points

Great answer, thanks Kevin! I might post later with the result and what tools I'm using in case anyone else wants to know.

Kevin Korte
Kevin Korte
28,149 Points

Sweet sounds good! Curious to know myself as you really could go either way with it.

Sebastian H
Sebastian H
19,905 Points

So it turns out that the best one to go for in this instance is the ajax <-> database route. It is really quite fast but my only concern is I haven't tried it out on a staging server yet. It might be much faster on my local environment than the staging server. To be honest I don't even know how to deploy a dynamic application like this yet.

Tools: I'm using node/express, pug for templating, mongo for my db and no front end UI framework. I might actually write a little blog post on how I did it because it combines some nice basics for something very usable.

Steps:

  1. bulk insert into mongodb from array of icons
  2. create icon data model with index on keywords using mongoose
  3. simple jQuery ajax search from font end
  4. jQuery auto search after set time delay and min no of keystrokes
  5. express handling of icon server route
  6. mongoose search db and return any partial string match using regular expressions
Kevin Korte
Kevin Korte
28,149 Points

Good to know, it definitely will be faster on your localhost - the ajax requests will have almost no latency to them. Once the request go out into the wild, ping through a DNS server, and come back, some sort of latency would be applied.

I'm literally throwing a dart at a dartboard, but I think if you accounted for 100ms of latency for an ajax request to go, and come back, I think you'd be safe in having that to compare.

But I don't think the ajax is the wrong solution either.

If you want to try it out on the cheap, try: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04

And Mlab https://mlab.com