mootools_新的MooTools插件：ElementFilter

mootools

My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work.

我的新MooTools插件ElementFilter为您提供了一种绝佳的方式，允许用户搜索任何混合元素的文本。 只需提供一个文本输入框，ElementFilter即可完成其余工作。

View Demo 观看演示

XHTML (The XHTML)

<ul id="my-list">
	<li>ADDRESS</li>
	<li>APPLET</li>
	<li>AREA</li>
	<li>A</li>
	<li>BASE</li>
	<li>BASEFONT</li>
	<li>BIG</li>
	<li>BLOCKQUOTE</li>
	<li>BODY</li>
	<li>BR</li>
	<!-- more -->
</ul>

I've used a list for this example but you can use any type or mix of elements that you'd like.

在此示例中，我使用了一个列表，但是您可以使用任何类型的混合元素。

MooTools JavaScript (The MooTools JavaScript)

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
				this.findMatches(this.elements,false);
			}
        }.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) { 
				if(!el.retrieve('showing')){
					this.fireEvent('show',[el]);
				}
				matches.push(el); 
				el.store('showing',true);
			}
			else {
				if(el.retrieve('showing')) {
					this.fireEvent('hide',[el]);
				}
				el.store('showing',false);
			}
			return true;
        }.bind(this));
		return matches;
	}
});

The above options are pretty self explanatory so I'll skip the formalities. As you can see, all you need to do is provide the text element to listen to, the elements to search, and your option values.

上面的选项很容易解释，因此我将跳过手续。 如您所见，您所要做的就是提供要收听的文本元素，要搜索的元素以及您的选项值。

MooTools示例用法 (The MooTools Sample Usage)

/* usage */
window.addEvent('domready',function() {
  var myFilter = new ElementFilter('search-term', '#my-list li', {
    trigger: 'keyup',
	cache: true,
    onShow: function(element) {
		element.set('morph',{
			onComplete: function() {
				element.setStyle('background-color','#fff');
			}
		});
		element.morph({'padding-left':30,'background-color':'#a5faa9'});
    },
    onHide: function(element) {
		element.set('morph',{
			onComplete: function() {
				element.setStyle('background-color','#fff');
			}
		});
		element.morph({'padding-left':0,'background-color':'#fac3a5'});
    }
  });
});

This is a sample usage of this plugin. When a match is found, the element's background turns green and fades back to white. When an element no longer matches, I do the same effect but with red.

这是此插件的示例用法。 找到匹配项后，元素的背景变为绿色，然后变回白色。 当某个元素不再匹配时，我将执行相同的操作，但使用红色。

View Demo 观看演示

This plugin provides a great way to search for specific text within elements on a page. I recommend using a list (UL or OL) as they are very easily searchable.

该插件提供了一种在页面元素内搜索特定文本的好方法。 我建议使用列表(UL或OL)，因为它们很容易搜索。

A special thanks to Jeremy Parrish for his help in developing this plugin!

特别感谢Jeremy Parrish在开发此插件方面的帮助！

翻译自: https://davidwalsh.name/plugin-element-filter

mootools