Forums

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:

<script>
$(document).ready(function(){
    $('.searchFilter').simpleContentSearch({
        'hover'      : 'searchBoxHover',
        'active'     : 'searchBoxActive',
        'normal'     : 'searchBoxNormal',
        'searchList' : '.jThumbnailScroller a',
        'searchItem' : 'img',
        'within'     : 'title'
    });
});</script>

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

<ul class="imgscontainer portfolio-v6-items">

as a container.
and for each thumbnail image I have

<div class="imgcontainer">

which has a

<span class="thumb_title">Title of image</span>

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!

treehouse : what would you like to learn today?

Forums

Simple Content Search with javascript