Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Simple Content Search with javascript Re: Simple Content Search with javascript

#106881
Mottie
Member

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'
});
});‚Äč