Zvýrazňovač:Plugin pro vyhledávání a zvýrazňování MooTools

Vyhledávání na stránce je hlavní funkcí prohlížeče, ale co kdybychom mohli kódovat vyhledávací pole v JavaScriptu, které by dělalo totéž? Rozhodl jsem se to udělat pomocí MooTools a skončil jsem s docela slušným řešením.

Třída MooTools JavaScript

var Highlighter = new Class({
			
	/* implements */
	Implements: [Options],

	/* options */
	options: {
		autoUnhighlight: true,
		caseSensitive: false,
		elements: '*',
		className: '',
		onlyWords: false,
		tag: 'span'
	},
	
	/* initialization */
	initialize: function(options) {
		/* set options */
		this.setOptions(options);
		this.elements = $$(this.options.elements);
		this.words = [];
	},
	
	/* directs the plugin to highlight elements */
	highlight: function(words,elements,className) {
		
		/* figure out what we need to use as element(s) */
		var elements = $$(elements || this.elements);
		var klass = className || this.options.className;
		if (words.constructor === String) { words = [words]; }
		
		/* auto unhighlight old words? */
		if(this.options.autoUnhighlight) { this.unhighlight(); }
		
		/* set the pattern and regex */
		var pattern = '(' + words.join('|') + ')';
		pattern = this.options.onlyWords ? '\\b' + pattern + '\\b' : pattern;
		var regex = new RegExp(pattern, this.options.caseSensitive ? '' : 'i');
		
		/* run it for each element! */
		elements.each(function(el) { this.recurse(el,regex,klass); },this);
		
		/* make me chainable! */
		return this;
	}, 
	
	/* unhighlights items */
	unhighlight: function(words) {
		//var selector = this.options.tag + (word ? '[rel=' + word + ']' : '');
		if (words.constructor === String) { words = [words]; }
		words.each(function(word) {
			word = (this.options.caseSensitive ? word : word.toUpperCase());
			if(this.words[word]) {
				var elements = $$(this.words[word]);
				elements.set('class','');
				elements.each(function(el) {
					var tn = document.createTextNode(el.get('text'));
					el.getParent().replaceChild(tn,el);
				});
			}
		},this);
		return this;
	},
	
	/* recursed function */
	recurse: function(node,regex,klass) {
			if (node.nodeType === 3) {
				var match = node.data.match(regex);
				if (match) {
					/* new element */
					var highlight = new Element(this.options.tag);
					highlight.addClass(klass);
					var wordNode = node.splitText(match.index);
					wordNode.splitText(match[0].length);
					var wordClone = wordNode.cloneNode(true);
					highlight.appendChild(wordClone);
					wordNode.parentNode.replaceChild(highlight, wordNode);
					highlight.set('rel',highlight.get('text'));
					var comparer = highlight.get('text');
					if(!this.options.caseSensitive) { comparer = highlight.get('text').toUpperCase(); }
					if(!this.words[comparer]) { this.words[comparer] = []; }
					this.words[comparer].push(highlight);
					return 1;
				}
			} else if ((node.nodeType === 1 && node.childNodes) && !/(script|style)/i.test(node.tagName) && !(node.tagName === this.options.tag.toUpperCase() && node.className === klass)) {
				for (var i = 0; i < node.childNodes.length; i++) {
					i += this.recurse(node.childNodes[i],regex,klass);
				}
			}
			return 0;
		}
	});

Třída nabízí několik možností:

• autoUnhighlight:(výchozí hodnota je true) Definuje, zda se má či nemá automaticky zrušit zvýraznění zvýrazněných slov při vyhledávání.
• caseSensitive:(výchozí hodnota je false) Definuje, zda má vyhledávání rozlišovat malá a velká písmena.
• prvky:(výchozí hodnota je '*') Definuje, které prvky lze prohledávat.
• className:(výchozí hodnota je '') Název třídy, který bude představovat zvýrazněnou slovní třídu. Aplikuje se na rozsah.
• onlyWords:(výchozí hodnota je false) Definuje, zda má třída hledat pouze slova.
• tag:(výchozí hodnota je 'span') Definuje vygenerovaný typ prvku, který bude obsahovat zvýrazněný text.

Třída má dvě hlavní metody:

• zvýraznění:Zvýrazní daný text. Přijímá slova, prvky a název třídy jako parametry.
• zrušit zvýraznění:Zruší zvýraznění daného textu. Přijímá slova jako parametry.

Použití MooTools

/* sample usage */
window.addEvent('domready',function() {
	
	/* instance */
	var highlighter = new Highlighter({
		elements: '#sample-content li',
		className: 'highlight',
		autoUnhighlight: false
	});
	
	/* submit listener */
	document.id('submit').addEvent('click',function() { if(document.id('search').value) { highlighter.highlight(document.id('search').value); } });
	document.id('submit3').addEvent('click',function() { if(document.id('search3').value) { highlighter.highlight(document.id('search3').value,'*','highlight1'); } });
	document.id('submit2').addEvent('click',function() { if(document.id('search2').value) { highlighter.unhighlight(document.id('search2').value); } });
	
	document.id('search').addEvent('keypress',function(e) { if(e.key == 'enter') { document.id('submit').fireEvent('click'); } });
	document.id('search3').addEvent('keypress',function(e) { if(e.key == 'enter') { document.id('submit3').fireEvent('click'); } });
	document.id('search2').addEvent('keypress',function(e) { if(e.key == 'enter') { document.id('submit2').fireEvent('click'); } });
	
});

Skvělé je, že pro tuto třídu lze veřejně použít pouze dvě funkce:highlight() a unhighlight().

Je pro mě důležité zmínit, že tato třída není dokonalá! Jeden do očí bijící problém spočívá v tom, že pokud hledáte slovo, pak zrušte zvýraznění slova a poté toto slovo hledáte s dalším slovem („Lorem“ => „Lorem ipsum“), hledač nenajde druhé slovo kvůli způsob, jakým jsou uzly na svém místě. Pokud máte řešení, jak to opravit, dejte mi prosím vědět. Tato třída byla založena na http://bartaz.github.com/sandbox.js/jquery.highlight.html.

Šťastné hledání!