Home › Forums › JavaScript › Simple Content Search with javascript › Re: Simple Content Search with javascript
July 27, 2012 at 12:07 pm
#106881
MottieMember
That helped! Updated demo
$.fn.simpleContentSearch = function(options) {
/**
* Plugin Top Level Scope Variables
*
*/
var defaults = {
'active': 'active',
'normal': 'normal',
'searchList': 'container',
'searchItem': 'span',
'effect': 'none' // fade, none
};
var base = this;
var settings = $.extend({}, defaults, options);
/**
* The main searching method.
* Using the input of the user, search for (base.text())
*/
function startSearching(query) {
$('.' + settings.searchList).each(function() {
$(this).find(settings.searchItem).each(function() {
var elem = $(this);
if (!elem.html().match(new RegExp('.*?' + query + '.*?', 'i'))) {
if (settings.effect == 'fade') {
$(this).closest('.' + settings.searchList).fadeOut();
} else {
$(this).closest('.' + settings.searchList).hide();
}
} else {
if (settings.effect == 'fade') {
$(this).closest('.' + settings.searchList).fadeIn();
} else {
$(this).closest('.' + settings.searchList).show();
}
return false;
}
return;
});
});
}
return this.each(function() {
// On Blur
base.blur(function() {
var elem = base;
elem.removeClass().addClass(options.normal);
});
// On Focus
base.focus(function() {
var elem = base;
elem.removeClass().addClass(options.active);
});
//Keyup
base.keyup(function() {
startSearching(base.val());
});
return this;
});
};
$(document).ready(function() {
$('.searchFilter').simpleContentSearch({
'hover': 'searchBoxHover',
'active': 'searchBoxActive',
'normal': 'searchBoxNormal',
'searchList': 'imgcontainer',
'searchItem': 'span'
});
});