Grow your CSS skills. Land your dream job.

Simple Content Search with javascript

  • # May 25, 2012 at 7:04 pm

    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.

    # May 26, 2012 at 10:45 am

    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.

    # May 31, 2012 at 9:26 am

    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

    # May 31, 2012 at 9:27 am

    attempt

    # May 31, 2012 at 12:21 pm

    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:

    # June 3, 2012 at 3:44 pm

    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!

    # June 3, 2012 at 8:37 pm

    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)
    # June 4, 2012 at 5:44 am

    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.

    # June 4, 2012 at 3:14 pm

    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;

    });
    };
    # June 6, 2012 at 8:57 am

    Now it works !
    Thank you !

    # July 23, 2012 at 11:39 am

    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 !

      # July 27, 2012 at 10:46 am

      Now the code is more cleaner! check my previous post

      # July 27, 2012 at 12:07 pm

      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'
      });
      });​

      # July 29, 2012 at 6:14 pm

      Thanks!

    Viewing 14 posts - 1 through 14 (of 14 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".