Simple Content Search with javascript

[dynamyc]

First of all this is how the script works: jsfiddle

So, I want to make the plugin to search through images (thumbnails) by a attribute like “title” for example or something else. Here is my markup: jsfiddle

I can’t make the script to search through that images, I know something is wrong, maybe I didn’t put the correct path for

‘searchList’ : ‘jThumbnailScroller’,

‘searchItem’ : ‘a’

The code below will activate the plugin:

$(document).ready(function(){

$('.searchFilter').simpleContentSearch({

'active' : 'searchBoxActive',

'normal' : 'searchBoxNormal',

'searchList' : 'jThumbnailScroller',

'searchItem' : 'a'

});

});

The ‘searchList’ setting specifies the content that will be searched. In this case it is searchable tr. Finally, the ‘searchItem’ setting allows to dive in and specify an individual element to search. In this case, I use ‘td’.

Hope you understand what I’m trying to achieve.

[Mottie]

Hi dynamyc!

The way the plugin is currently written, you won’t be able to extract out the title attribute from the search item. For example, if you had these settings:

'searchList' : 'jThumbnailScroller a',

'searchItem' : 'img'

it would work if “img” was actually an element that contained html, but img tags do not.

So, I ended up making a few changes, I hope you don’t mind, and added a new option named “within”. So now you can initial the plugin like this:

$(function(){

$('.searchFilter').simpleContentSearch({

'hover'      : 'searchBoxHover',

'active'     : 'searchBoxActive',

'normal'     : 'searchBoxNormal',

'searchList' : '.jThumbnailScroller a',

'searchItem' : 'img',

'within'     : 'title' // 'html' or any attribute of searchItem

});

});

Here are both of your demos updated: text search & image title search

And the modified plugin code:

$.fn.simpleContentSearch = function ( opts ) {



/**

* Plugin Top Level Scope Variables

*

*/



var settings = {

'active'     : 'active',

'normal'     : 'normal',

'searchList' : '.searchable tr', // use jQuery selector

'searchItem' : 'td',

'effect'     : 'none', // fade, none

'within'     : 'html'  // html or attribute name

};



var base = this,

options = $.extend({}, settings, opts);



/**

* The main searching method.

* Using the input of the user, search for (base.text())

*/



function startSearching(query, options) {

var elem, str, regexp = new RegExp(query, 'i');

$( options.searchList ).each(function() {

$(this).find( options.searchItem ).each(function() {

elem = $(this);



if (options.within === 'html') {

str = elem.html();

} else {

str = elem.attr(options.within) || '';

}



if (regexp.test(str)) {

elem.closest( options.searchList )[ options.effect === 'fade' ? 'fadeIn' : 'show' ]();

} else {

elem.closest( options.searchList )[ options.effect === 'fade' ? 'fadeOut' : 'hide' ]();

}



});

});

}



return this.each(function() {



// On Blur

base.blur(function(){

base.removeClass(options.active).addClass(options.normal);

});



// On Focus

base.focus(function(){

base.removeClass(options.normal).addClass(options.active);

});



//Keyup

base.keyup(function(){

startSearching(base.val(), options);

});



return this;



});

};

Oh, and please note that the “searchList” option changed to include the “.” needed in the jQuery selector. It’s just better practice to keep it in the option in case you target an ID or element first instead of a class name.

[dynamyc]

I’ve copied your modified code and integrate it with another plugin for thumbnail scroller but I get a strange error when I inspect element in Chrome: Uncaught SyntaxError: Unexpected token ILLEGAL
Any suggestions on how to fix this and make it work ?
Thanks!
Here is my attempt

[dynamyc]

attempt

[Mottie]

Did you copy and paste directly from jsFiddle? If so, sometimes is adds a strange invisible character after the code. If I copy and paste directly into my text editor, it shows up as a question mark. Just remove all of the white space between the closing brackets and the closing script tag:

[dynamyc]

Thanks!
Now I have another issue:

I have a jquery thumbnail scroller and for example if you scroll till the end of the
thumbnails and then you search for “bedroom” you have to scroll back to the
beginning to see the results.

Hope you understand what I’m trying to say.
I can’t post the code for thumbnails scroller here or on jsfiddle because it’s pretty large.
You can check here what I’m trying to say.
Please give me some suggestions.
Thanks again!

[Mottie]

Hi dynamyc!

There isn’t a callback function written in the search plugin, and I’m not sure about the scroller plugin. But anyway to get the selected search images into view just add this line of code:

$('.jTscroller').css('left', 0)

[dynamyc]

Is not working, I have to scroll back to see the results.
I’ve put it in jquery.thumbnailScroller.js

I’ve tested also with Firebug console.

[Mottie]

ok I’ve updated the simpleContentSearch.js file to include animation time (effectTime) and an animation callback (complete). Here is a demo.

So now you can initialize it like this:

$('.searchFilter').simpleContentSearch({

hover      : 'searchBoxHover',

active     : 'searchBoxActive',

normal     : 'searchBoxNormal',

searchList : '.jThumbnailScroller a',

searchItem : 'img',

within     : 'title',

complete   : function(){

$('.jTscroller').css('left', 0);

}

});

And here is the updated simpleContentSearch.js file:

/**

* Plugin Top Level Scope Variables

*

*/



$.fn.simpleContentSearch = function ( opts ) {



var settings = {

active      : 'active',

normal      : 'normal',

searchList  : '.jThumbnailScroller a', // use jQuery selector

searchItem  : 'img',

within      : 'title', // html or attribute name

effect      : 'fade',  // fade, none

effectTime  : 'slow',  // 'slow', 'fast' or number in milliseconds

complete    : null

};



var base = this,

options = $.extend( {}, settings, opts );



/**

* The main searching method.

* Using the input of the user, search for (base.text())

*/



function startSearching( query, options ) {

var elem, str, regexp = new RegExp( query, 'i' );

$( options.searchList ).each(function() {

$(this).find( options.searchItem ).each(function() {

elem = $(this);



if ( options.within === 'html' ) {

str = elem.html();

} else {

str = elem.attr( options.within ) || '';

}



if ( regexp.test(str) ) {

elem.closest( options.searchList )[ options.effect === 'fade' ? 'fadeIn' : 'show' ]( options.effectTime, options.complete );

} else {

elem.closest( options.searchList )[ options.effect === 'fade' ? 'fadeOut' : 'hide' ]( options.effectTime, options.complete );

}



});

});

}



return this.each(function() {



// On Blur

base.blur(function(){

base.removeClass( options.active ).addClass( options.normal );

});



// On Focus

base.focus(function(){

base.removeClass( options.normal ).addClass( options.active );

});



//Keyup

base.keyup(function(){

startSearching( base.val(), options );

});



return this;



});

};

[dynamyc]

Now it works !
Thank you !

[dynamyc]

Again, now I’m trying to integrate this search in another markup and I can’t make it work.
Now I have an

as a container.
and for each thumbnail image I have

which has a

Title of image 

Here is a jsfiddle.
Thank you for your help!

Later edit: Improved and clean markup !

[dynamyc]

Now the code is more cleaner! check my previous post

[Mottie]

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'

});

});​

[dynamyc]

Thanks!

[Author]

Posts