CODEWITHSUNDEEP
javascriptfiltermootoolsselector
XTRUST.ORG
XTRUST.ORG

Reputation: 3402

Mootools filter plugin

may be you can help me:

Please check this demo: Plugin demo Plugin description: Plugin description

How can I show only matching items at the top of the list and hide not matching during input typing? Thanks!

Upvotes: 0

Views: 181

Answers (1)

dmitry
dmitry

Reputation: 5049

You can do it using onShow and onHide handlers, of course. See here: http://jsfiddle.net/ypfPY/3/

var myFilter = new ElementFilter('search-term', '#my-list li', {
    trigger: 'keyup',
    cache: false,
    onShow: function(element) {
       element.setStyle('display', 'block');
    },
    onHide: function(element) {
       element.setStyle('display', 'none');
    }
});

Frankly speaking, I encountered a set of bugs in ElementFilter source (bug on firstly retrieving "showing" and false instead of true for matchOverride when showing all items), so, you better get source from here:

var ElementFilter = new Class({

  // implements
  Implements: [Options,Events],

  // options
  options: {
    cache: true,
    caseSensitive: false,
    ignoreKeys: [13, 27, 32, 37, 38, 39, 40],
    matchAnywhere: true,
    property: 'text',
    trigger: 'mouseup',
    onStart: $empty,
    onShow: $empty,
    onHide: $empty,
    onComplete: $empty
  },

  //initialization
  initialize: function(observeElement,elements,options) {
    //set options
    this.setOptions(options);
    //set elements and element
    this.observeElement = document.id(observeElement);
    this.elements = $$(elements);
    this.matches = this.elements;
    this.misses = [];
    //start the listener
    this.listen();
  },

  //adds a listener to the element (if there's a value and if the event code shouldn't be ignored)
  listen: function() {
    //add the requested event
    this.observeElement.addEvent(this.options.trigger,function(e) {
    //if there's a value in the box...
    if(this.observeElement.value.length) {
      //if the key should not be ignored...
      if(!this.options.ignoreKeys.contains(e.code)) {
        this.fireEvent('start');
        this.findMatches(this.options.cache ? this.matches : this.elements);
        this.fireEvent('complete');
      }
    }
    else{
      //show all of the elements - changed to true
      this.findMatches(this.elements,true);
    }
  }.bind(this));
},

//check for matches within specified elements
findMatches: function(elements,matchOverride) {
  //settings
  var value = this.observeElement.value;
  var regExpPattern = this.options.matchAnywhere ? value : '^' + value;
  var regExpAttrs = this.options.caseSensitive ? '' : 'i';
  var filter = new RegExp(regExpPattern, regExpAttrs);
  var matches = [];                
  //recurse
  elements.each(function(el){
    var match = matchOverride == undefined ? filter.test(el.get(this.options.property)) : matchOverride;
   //if this element matches, store it...
   if(match) { 
     // default value added  
     if(!el.retrieve('showing', true)){
       this.fireEvent('show',[el]);
     }
     matches.push(el); 
     el.store('showing',true);
   }
   else {
     if(el.retrieve('showing', true)) {
       this.fireEvent('hide',[el]);
     }
     el.store('showing', false);
   }
   return true;
 }.bind(this));
 return matches;
 }
});

Upvotes: 1

Related Questions