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

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #38222
    dynamyc
    Member

    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.

    #103517
    Mottie
    Member

    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.

    #103718
    dynamyc
    Member

    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

    #103719
    dynamyc
    Member
    #103731
    Mottie
    Member

    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:

    #103839
    dynamyc
    Member

    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!

    #103843
    Mottie
    Member

    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)
    #103857
    dynamyc
    Member

    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.

    #103874
    Mottie
    Member

    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;

    });
    };
    #103963
    dynamyc
    Member

    Now it works !
    Thank you !

    #106621
    dynamyc
    Member

    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 !

      #106866
      dynamyc
      Member

      Now the code is more cleaner! check my previous post

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

      #106973
      dynamyc
      Member

      Thanks!

    Viewing 14 posts - 1 through 14 (of 14 total)
    • The forum ‘JavaScript’ is closed to new topics and replies.