Enhance Type and Spot

In previous post (Type and spot using jQuery’s :contains()) we have create a simple content spotter using :contains() selector, the possibility to spot an element using that technique are numerous, by hiding and showing in animation for example.

As you remember in another post (Filter Image View Using jQuery) we have try to create a filter image view using horizontal slide effect. The effect would we add to show or hide the element that contains or not contains the text we specify.

jQuery provides a selector to help us find an element that contains a specified text using :contains(). It will only select the matched elements and the unmatched will be ignored. To use horizontal slide effect we need to find the unmatched elements to hide them, so the matched elements will be displayed in focus. So we need another selector to reverse the :contains() function, :not(). This selector will selects all elements that do not match the given selector.

Previously we use this code to find matched elements.

$('.list li:contains('+keyword+')')

To find unmatched elements we will use :not() outside :contains().

$('.list li:not(:contains('+keyword+'))')

After find the unmatched elements we need to hide them in animation, by decresing each element width, opacity, padding and margin.

$('.list li:not(:contains('+keyword+'))').stop()
.animate({'width' : 0, 'opacity' : 0, 'padding': 0, 'margin': 0},
function() {
	$(this).css('display', 'none');
});

To revert each element to show in order to avoid all element hidden we will set each element to its default style before hide the unmatched elements.

$('.list li').stop().animate({'width': '120px','opacity': 1,'padding': '10px','margin': '.5em .5em .5em 0'},
function() {
	$(this).css('display', 'inline-block');
});

It will be displayed like these images :

Before user type some text

After user type “j”

The full code will be :

$('#searchbox').keyup(function() {

	keyword = $(this).val();

	$('.list li').stop().animate({'width': '120px',
		 			'opacity': 1,
		 			'padding': '10px',
		 			'margin': '.5em .5em .5em 0'}, function() {
		 				$(this).css('display', 'inline-block');
		 			});

	$('.list li:not(:contains('+keyword+'))').stop()
						  .animate({'width' : 0,
							 'opacity' : 0,
							 'padding': 0,
							 'margin': 0}, function() {
		 			$(this).css('display', 'none');
		 					});

}).focus(function() {

	if($(this).val() == 'Try to type and delete... (case sensitive)')
		$(this).val('');

}).blur(function() {

	if($(this).val() == '')
		$(this).val('Try to type and delete... (case sensitive)');
});

Conclusion

By using these effect we can see the possibility to enhance more technique to spot the elements. If you find other technique you can share on comments form below.