0
可能是你能帮助我:Mootools的过滤器插件
请检查该演示:Plugin demo 插件描述:Plugin description
我怎么能只显示匹配的项目在列表的顶部,并隐藏在不匹配输入打字? 谢谢!
可能是你能帮助我:Mootools的过滤器插件
请检查该演示:Plugin demo 插件描述:Plugin description
我怎么能只显示匹配的项目在列表的顶部,并隐藏在不匹配输入打字? 谢谢!
当然,您可以使用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');
}
});
坦白地说,我遇到了一组错误的ElementFilter中源(错误上首先检索“显示”和虚假的,而不是真正的matchOverride显示所有项目时),所以,你最好来源于:
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;
}
});