Filtering data with jQuery

We are working with data every day and there is a part of our applications, which is responsible for presenting the information to the user. Sometimes we need to show a lot of records and then we are using pagination or additional server requests to filter the data. A little JavaScript code could change the things a lot - fast data filtering and better user experience.

The example which I used is located here (download the source code). The script generates fifty random words and shows them in a simple HTML table. The idea is to use the input field at the top to access a specific record. When the user starts typing, the words are automatically filtered. In this case I used jQuery, but generally you can easily use some other library.

It is good to put all the filtering login in one namespace/module. I really like the module pattern. That's why I used it here.

var Filtering = (function(){
	...
})();

I also used a function by James Padolsey which generates the random words:

var createRandomWord = function() {
	var consonants = 'bcdfghjklmnpqrstvwxyz ',
		length = 20,
		vowels = 'aeiou ',
		rand = function(limit) {
			return Math.floor(Math.random()*limit);
		},
		i, word='',
		consonants = consonants.split(''),
		vowels = vowels.split('');
	for (i=0; i<length/2; i++) {
		var randConsonant = consonants[rand(consonants.length)],
			randVowel = vowels[rand(vowels.length)];
		word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
		word += i*2<length-1 ? randVowel : '';
	}
	return word;
};

Adding the words in a HTML table:

var generateRows = function() {
	var rows = 50;
	for(var i=0; i<rows; i++) {
		var row = $('<tr class="row"><td>' + (i + 1) + '</td><td class="word">' + createRandomWord() + '</td></tr>');
		$("#rows").append(row);
	}
};

As it is good to present the data immediately after a change in the filter input, I attached a keyup event handler to the field. Once I got the value of the input I used regular expression to decide which rows to hide or show.

var initFilterField = function() {
	filterInput.keyup(function() {
		var filterText = filterInput.val().toLowerCase();
		var rows = $(".row");
		var numOfRows = rows.length;
		for(var i=0; i<numOfRows; i++) {
			var row = rows.eq(i);
			var word = row.find(".word").html();
			if(word && word.toLowerCase().match(".*" + filterText + ".*")) {
				row.css("display", "table-row");
			} else {
				row.css("display", "none");
			}
		}
	});
	filterInput.focus();
};

The whole example's code looks like that:

$(document).ready(function() {
	
	var Filtering = (function(){
		
		var filterInput = $("#filter");
		var createRandomWord = function() {
			var consonants = 'bcdfghjklmnpqrstvwxyz ',
				length = 20,
				vowels = 'aeiou ',
				rand = function(limit) {
					return Math.floor(Math.random()*limit);
				},
				i, word='',
				consonants = consonants.split(''),
				vowels = vowels.split('');
			for (i=0; i<length/2; i++) {
				var randConsonant = consonants[rand(consonants.length)],
					randVowel = vowels[rand(vowels.length)];
				word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
				word += i*2<length-1 ? randVowel : '';
			}
			return word;
		};
		var generateRows = function() {
			var rows = 50;
			for(var i=0; i<rows; i++) {
				var row = $('<tr class="row"><td>' + (i + 1) + '</td><td class="word">' + createRandomWord() + '</td></tr>');
				$("#rows").append(row);
			}
		};
		var initFilterField = function() {
			filterInput.keyup(function() {
				var filterText = filterInput.val().toLowerCase();
				var rows = $(".row");
				var numOfRows = rows.length;
				for(var i=0; i<numOfRows; i++) {
					var row = rows.eq(i);
					var word = row.find(".word").html();
					if(word && word.toLowerCase().match(".*" + filterText + ".*")) {
						row.css("display", "table-row");
					} else {
						row.css("display", "none");
					}
				}
			});
			filterInput.focus();
		};
		
		return {
			initFilterField: initFilterField,
			generateRows: generateRows
		};
		
	})();
	
	Filtering.initFilterField();
	Filtering.generateRows();
	
});

The result of it is avaible here http://krasimirtsonev.com/files/filteringdata/filtering.html.

Source code.

Filtering data with jQuery

Posts that you may be interested in