MooToolsのフィルタプラグイン

Question

はあなたが私を助けることができることがあります

このデモを確認してください：Plugin demo プラグインの説明：Plugin description

を私はリストの上部にある項目を照合し、中に一致しない隠すことができますどのように入力タイピング？ ありがとう！

Answer 1

もちろん、onShowとonHideハンドラを使用して行うことができます。 こちらをご覧ください：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'); 
    } 
}); 

率直に言って、私は（すべての項目を表示するときに、まずmatchOverrideための「上映」と虚偽の代わりに、真の取得上のバグ）ElementFilterソースのバグのセットに遭遇したので、あなたが良くなりますソースはこちらから：

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