Build on-the-fly filtering with jQuery

This tutorial looks at using jQuery to build on-the-fly filtering for search results to quickly filter out by matching search terms with content and hiding those elements that don't match.

Recently when jQuery upgraded their API they added a nice on-the-fly filtering feature for filtering by search terms within the API. To get an idea of what I'm talking about you can see the effect here by typing 'bl' into the search jQuery box and you will notice only the entries containing 'bl' are displayed.


You can download the code for this tutorial here
You can view a working demo here



This filtering works on both the title and on the content. It is quite easy to build and a nice trick that has multiple applications. Let's have a look at what our HTML will look like for each of our page elements:

<div class='option'>
 <div class='title'>Soccer</div>
 <div class='description'>A sport played with two teams of eleven players, a round ball and two sets of goals.</div>
 <a href='#'>more...</a>
</div>

So each element is an 'option' and there is a 'title' and a 'description' section. Fairly straight forward. Now let's look at the javascript behind the functionality:

$("document").ready(function() {
 $("#search_field").keyup(function() {
  var terms = $(this).val().toLowerCase();
  if (!terms) {
   $(".option").show();
  } else {
   $(".option").hide().filter(function() {
    return ($(this).children(".title").text().toLowerCase().indexOf(terms) > -1) || ($(this).children(".description").text().toLowerCase().indexOf(terms) > -1);
   }).show();
  }
 });
});

We start by adding the keyup event listener to our #search_field input. Whenever the keyup event occurs we grab the contents of the input and convert to lowercase and store in the terms variable.

If terms is empty we display all of our pages elements. If it is not empty then we begin by hiding all of the '.option' elements and then we apply a filter function. This function filters out all of the elements that do not contain the terms in the '.title' child element or the '.decription' child element. Those elements that haven't been filtered out are then displayed using show().

This kind of filtering is really useful when you have a limited number of elements on the page and makes good sense if you want to avoid round trips to the database.

How to get the best start with an IT career

When you are in College / University it is hard to have the far-sightedness to know how your career is going to progress and where you will be in the future. If you are currently studying to work in the IT industry it is a good idea to start thinking about what you are going to do once you graduate and what direction you would like to take. In this post I would like to give you some suggestions on how to make those first few steps into the IT industry. If you have some good suggestions yourself please add them in the comments.


What to do before you graduate
Whatever you do, don't wait until you graduate before you start thinking about what you will do with your qualification. Many of you will be doing a generic IT degree that will prepare you for a range of careers within the industry. Now is the time to find out exactly what area you want to work in. If you don't decide early you may find that you are in a job you don't enjoy and in that case your second job will need to be a move sideways to something you do enjoy.

Once you have found the area you are interested in start learning and I don't just mean your text books. If your area of choice is design start reading about colour, start looking through books about interior decorating or design theory. If it is e-business, research some of the success stories in the industry or some of the more abstract titles on marketing. Read, read, read! Knowledge is king in the IT industry, the more you learn the more valuable you are; not just in terms of financial gain, but in the quality of the work you will deliver.

Apply your knowledge. Find an open source project on the internet and get to work. Even if you can only work on small sections you will improve. Reach out and connect to others in your industry via social networking and find out how you can help by asking. While I was attending university I asked anyone I knew if they could offer some work experience and after a couple of weeks I was able to help collate and prepare single HTML pages for a company intranet, eventually progessing on to whole sections of their site. You need to reach out, the goal is to get something on your resume other than working at Wendys or generic call centre experience.

Do as much studying, casual work, volunteer work, work experience and open source project work as you can before you graduate and you will be in a prime position come the time you graduate.

What to do once you graduate
Once you graduate you should have a clear idea of which part of the IT industry you want to work in and hopefully you have put the hard yards in to read and learn some of the skills you will require.

If you start having a look at employment advertisements you may be dissapointed, most of the jobs you would love to be doing usually require a lot more experience than you have. I would suggest that this is a fact for most people starting out, if you are damn lucky you will be able to find a fantastic first job that not only pays well, but is exactly what you were looking for. The key here is to focus on where you want to be rather than what is available to you now. It is best to think of your first job as a stepping stone to your ideal job. My first job as a programmer was paying much less than I was getting paid at the supermarket I worked at during my studies. The trick is to find a job that will actually get you to where you want to be next.

The other point I would like to make about your first job; if it is only a stepping stone and there is no progression, do not stay there longer than a year. Work as hard as you possibly can in the first year to add many different skills to your resume and then move to where you want to be. If you are still being paid like a paperboy after a year, you are either not learning enough or your work is not appreciated. Remember, you want to get to the next step and start doing some real work.

Once you land that all important second job you should be on your way to a positive and rewarding career in the IT industry.

Just to sumarise:
- Decide early what you want to do, don't wait till you graduate
- Learn as much as you can while you are still studying
- Look for work opportunities either in open source projects or work experience through social connections
- Be content with your first job as long as it steers you in the right direction
- Work hard in your first year so you can be in the job you want in a years time
- Knowledge is king, learn and keep learning

How can business reap the benefits of organic social networking?

The long term benefits of social networking for enterprise are well known and have already been discussed in detail. There's team building, leveraging your knowledge base, early adoption and cross team discussion to name a few. For a long time there has been two sides of the fence to social networking in business; there are those who do and those that don't. The don't group is made up of several smaller groups; the we don't know how to do it, the we don't want to ruin our reputation or the we don't believe in the benefits groups.


For a long time I believed that the second group were just poorly educated and if they could see the light (or just give it a try) they would not only be convinced of the benefits, but they could reap the rewards of an open blogging policy. But for larger size outfits this approach is just too unwieldly, the size of the dinosaur is too great and the idea of testing the waters is hard with such a large foot. For smaller sized operations it's not viable to crowd source and hard to find passionate bloggers (even in the IT industry) to write about work in their own free time.

So how can small and large business still leverage the benefits of social networking outside of company blogging while still reaping the benefits for the business? The solution lies in employee involvement outside of the business. Already employees are connecting via Twitter, Linked In, myspace and other social networking outside of business hours. These organically formed social networking groups and activities can be taken advantage of (with permission) and business wide networking can be seen as an extension of these organic groups.

Each of these sites has readily available APIs that can be used to link groups and information from each of your employees. The information that each employee is adding online has already been made publicly available. Does your employee already blog? Ask if you can provide their RSS feed to the rest of the company. Are there employees that tweet regularly? Why not have a company wide aggregator of this activity. As with all online activity the good quality links can be pushed higher and the chatter will be ignored. This large amount of activity that is already happening in the public arena could be shared within, and for the better material without.

Be brave, be passionate about your employees and reach out. Not by sticking your foot in it, but by gently wading in.