It's takes just few lines of Javascript / jQuery code to implement quick filter for an HTML table, here you go:

The HTML

 
<label for="kwd_search">Search:</label>
<input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Name</th>
<th>Sports</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin Tendulkar</td>
<td>Cricket</td>
<td>India</td>
</tr>
<tr>
<td>Tiger Woods</td>
<td>Golf</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Sharapova</td>
<td>Tennis</td>
<td>Russia</td>
</tr>
</tbody>
</table>
 

The Javascript

 
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
	// Write on keyup event of keyword input element
	$("#kwd_search").keyup(function(){
		// When value of the input is not blank
		if( $(this).val() != "")
		{
			// Show only matching TR, hide rest of them
			$("#my-table tbody>tr").hide();
			$("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
		}
		else
		{
			// When there is no input or clean again, show everything back
			$("#my-table tbody>tr").show();
		}
	});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
    "contains-ci": function(elem, i, match, array)
	{
		return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});
 

That's all it takes to put a quick filter using jQuery, see a live working demo here.Similar Posts:

• jQuery case-insensitive Contains Expression..!
• jQuery Fancy Custom Radio-button and Checkbox
• jQuery tablesorter plugin – a friend in need…
• Hacking jQuery Thickbox..!
• Printing data table vertically..! Why? and How?

I have gone through some of other implementation before writing this but here this version is complete copy of jQuery library's "contains" filter except it is case-insensitive.

In below code when it's using $(elem).text() it's calling Sizzle.getText internally which is Utility function for retreiving the text value of an array of DOM nodes.

$.extend($.expr[":"],
{
    "contains-ci": function(elem, i, match, array)
	{
		return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
	}
});

Here are some other nice jQuery Selectors and Expressions:

• JQuery Plugin: Extra selectors for JQuery
• jQuery Custom [:] Expressions

I thought let me use gist to host this tiny piece of code, may be just to make it easy to share and live as long as possible..!
Similar Posts:

• Implementing Quick Table Search using jQuery filter
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• Printing data table vertically..! Why? and How?
• jQuery Fancy Custom Radio-button and Checkbox
• WordPress Auto-Login for Friend/Ally Websites

jQuery mobile framework

jQuery 1.5.2 is released (on April 2nd) as a bug-fix release of jQuery version 1.5.x, fixing about 18+ issues/bugs reported. Along with that couple of days back on 31st March 2011 jQuery Mobile's alpha-4 version has been released.

jQuery mobile project is making good and steady progress though from their road-map published earlier I was expecting production ready release of jQuery mobile in Jan 2011. As I have invested into jQuery mobile as a technology and tool for one of my project and it's obvious that I can not release that when framework itself is not mature for production.

I am highly impressed with jQuery mobile framework project and I have chosen jQuery mobile over Sencha Touch after researching over it for sometime. One of the reason behind choosing jQuery mobile was number of devices they support. Look at the device support grid here.

I will be writing more on ExtJS Mobile (Sencha Touch) vs jQuery mobile in coming weeks, hopefully which will make developers take a smart decision depending upon the features they are looking for.

I would appreciate if you can share your experiences on above topic if you are about to take or have already taken decision in favor of one of them.

Similar Posts:

• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• jQuery 1.2.5 released
• When PHP Frameworks are going to stop PHP 4 support?
• jQuery 1.3.2 is out
• Symfony 1.1 RC1 Released

jQuery dg-magnet-combo (no CTL+Click Select)

Basically I wanted to write this plugin since long long time but could not get a while to hold and push my thoughts as a code to form this plugin. As the name suggests (which seems kind of difficult to understand the real purpose of this plugin) it does not deselect existing option when one selects another option in multi-selection list/combo-box.  How does this sound? Yes, w/o having your control key pressed. Basically I have been found of changing the default behavior of the html controls and with this new jQuery Magnet Multi-select List plugin, I will continue this trend. If you have already understood the meaning and purpose of this plugin you can move to plugin-usage without reading more boarding story about the plugin.

One would say that it's very easy you just have to hold the CTL key while selecting another option in combo-box but it's going to be very irritating when you have hundreds of options in your list and you have to select multiple out of them one of them is on top and the other one at the end of list, which makes it keeping that CTL key difficult and if one misses out CTL hold for a while and clicks he's gone. He has to start from all over again. To get rid of this problem many web-developers implement their lists/combo-box in ways where one has to click > select and move options from left-to-right and those on the right-side are the ones which are being selected by users. But this plugin will make your life as a developer and users life much easier by not dropping down the selected option each time they select another. Basically this will help many users who are less-friendly with computers and web in general and this plugin development with jQuery came in mind just out of need for such a plugin who can do so and as per my knowledge so far we don't have such plugin available for any javascript library.

Learning from the past experiences, this plugin will support accessibility from the beginning. Yes, there is a keyboard support too.

To use DG Magnet Combo plugin just add following code in your javascript:

$(document).ready(function(){
	$("#my_list").dgMagnetCombo();
});

See live demo here or goto github repository to download or fork.

Update: Plugin updated to 1.1 with following changes:

- Used inbuilt javascript/jQuery functions instead of self-made.
- Made it work with CTL key pressed. So now it works normal when someone uses it with CTL key pressed and then takes back (in hybrid mode)

Todo: Need to verify and test SHIFT key compatibility to make it work in natural mode when used with SHIFT key.

Bugs: Please let me know if you encounter any problem/bug while using this plugin. Either post comment on this blog or create an issue on github repository.

PS: I should have done a Google search properly before writing this one, I saw Anup Gupta has made his efforts in this direction and this plugin has some inspiration from his code for v1.1. But additionally this plugin has CTL key support which I could not see available somewhere else.Similar Posts:

• jQuery tablesorter plugin – a friend in need…
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• Radio-button with Checkbox behavior
• jQuery UI – 1.7.1 is released..
• jQuery 1.2.5 released

Fancy Radio/ Checkbox

I have written a jQuery Plugin for Fancy Custom Checkbox and Radio-buttons. To make form elements visually more expressive. I required this for one of my project and later on I have rewritten it completely to make it more generic and easier for jQuery Lovers. I am great fan of jQuery and I am inspired by http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ to write this plugin.

It's fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.

Javascript You need:

$(document).ready(function(){
	$(".radio").dgStyle();
	$(".checkbox").dgStyle();
});

CSS You need:

.radio {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("radio.png");
	background-repeat:no-repeat;
	cursor: default;
}
.checkbox {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("checkbox.gif") no-repeat;
	cursor: default;
	text-align:left;
}
.checkbox input,.radio input {
	display: none;
}
.checkbox input.show,.radio input.show {
	display: inline;
}
.selected {
	background-position: 0 -52px;
}
.block {
	width: 50%;
	float: left;
}
label {
	padding-left:10px;
	float:left;
	text-align:left;
}
 

Here, CSS class which we need to give is not fixed and it can be changed in CSS code and Javascript as well. So in above example it is "radio" and "checkbox", which could be anything you want. The only thing which needs to be taken care of is it has to be consistent in all CSS, Javascript and HTML we generate.

See live demo in action or just download a zip file consisting sample image, js and html code to play with.

Please comment your experience or any enhancement/feature you add to it or wish to have or any bug encountered while using it.

Love to hear back from You..! Similar Posts:

• Radio-button with Checkbox behavior
• Implementing Quick Table Search using jQuery filter
• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery tablesorter plugin – a friend in need…
• Hacking jQuery Thickbox..!

jQuery and jQuery-UI Compatibility:

The fact is jQuery and jQueryUI are not compatible, YES they are not. I tried to upgrade my application with jQuery1.4 but UI components are failed to work. I was using jQueryUI 1.7.2, later on I digg-in on the web to see how soon UI will support jQuery1.4 but seems like 1.7.x won't do that probably 1.8.x would.  So I tried looking at what is cooking with jQueryUI 1.8 but when I downloaded alpha release of UI1.8.a1 it had jQuery1.3.2 powering it...!

So I am just positive that before jQuery UI 1.8 will be released for production they would probably add support or make it compatible with jQuery 1.4.

Help/Reference:

Function calls for Popular jQuery methods

See how dramatically the function calls are reduced in 1.4 compared to 1.3.2..! It's just indication that how hard-work John Resig and Team would have put in.

To learn jQuery 1.4 and more about it's feature visit official website http://jquery14.com/ or take a look at this post on net-tuts website to checkout 15 must-know features of jQuery 1.4.Similar Posts:

• jQuery 1.5.2 and jQuery mobile alpha 4 released
• jQuery case-insensitive Contains Expression..!
• Implementing Quick Table Search using jQuery filter
• Hacking jQuery Thickbox..!
• jQuery 1.2.5 released

It includes some code improvements and stays compatible to latest version of jQuery 1.3.2 just like 1.2.4. It has been tested on Safari 4.x, Internet Explorer 7.0+, Firefox 3.x and will work on Chrome 2.x or 3.x as well.

I request any users to post back any problems/bugs they encounter or enhancements they need to be included.

jQuery Radio-button with Checkbox behavior

I saw a bug reported by ReneLeonhardt and tried to find out bug everything seemed all-right. Though I have made some changes, but still if you think that there is any patch required please let me know.Similar Posts:

• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery Magnet Multi-Select List – DG Magnet Combo
• jQuery 1.5.2 and jQuery mobile alpha 4 released
• Radio-button with Checkbox behavior
• MySQL 5.1 General Availability announced

jQuery is one of my favorite Javascript framework and so I am hoping for better growth of it's UI part as well.

I know discussions and planning are going on the Wiki and I know everyone will have a wishlist like I have. There are lot of options available as an plugins but having them in official UI bundle is a more better. UI Team must be working hard and there is lot of things which needs to be done.. All the best to jQuery UI team for bringing in Good for the future.

I have some complaints as well..but may be sometime later.Similar Posts:

• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• jQuery 1.2.5 released
• jQuery tablesorter plugin – a friend in need…
• jQuery 1.5.2 and jQuery mobile alpha 4 released
• jQuery or non-jQuery Calendar Schedulers

• jQuery 1.2.5 released
• jQuery case-insensitive Contains Expression..!
• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• Radio-buttons with Checkbox behavior – a jQuery Plugin 1.2.5

There is a huge bunch of tickets which is closed. Here is the list of tickets closed for jQuery 1.2.4 or 1.2.5. There were many browser compatibilities related issues and some are performance related and core improvements.

Good to see that our favourite Javascript framework is becoming more and more mature day by day.

Click here to see the reason behind rebuilding 1.2.4 as 1.2.5

Download jQuery 1.2.5Similar Posts:

• jQuery 1.5.2 and jQuery mobile alpha 4 released
• jQuery Plugin – Radio button with Checkbox Behavior – Updated
• jQuery 1.4 Released – jQuery UI has yet to achieve compatibility with it…
• jQuery UI – 1.7.1 is released..
• jQuery tablesorter plugin – a friend in need…