git ssb

0+

cel / text-node-searcher



Tree: c33ff19b22bab77c1a5965fc98011289a8b098ea

Files: c33ff19b22bab77c1a5965fc98011289a8b098ea / example.html

2398 bytesRaw
1<!doctype html>
2<html>
3	<head>
4		<meta charset="utf-8"/>
5		<title>demo</title>
6<style>
7highlight {
8	background-color: yellow;
9}
10</style>
11	</head>
12	<body>
13		<div>
14			<input size="80" id="search" type="search" value="eli"/>
15			<input type="button" id="prev-btn" value="&larr;"/>
16			<input type="button" id="next-btn" value="&rarr;"/>
17		</div>
18
19		<p>[brackets] (parens) $ ^ [a-z] ? * . + {3}</p>
20
21		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
22		id mauris odio. Morbi efficitur tellus tellus, sit amet viverra nibh
23		condimentum ac. Morbi lectus urna, hendrerit sed dui sit amet,
24		efficitur porta orci. Curabitur et mauris varius, suscipit metus
25		luctus, rhoncus elit. Nulla in leo venenatis, aliquet justo ut, laoreet
26		ligula. Phasellus condimentum magna nec erat congue mollis. Duis sit
27		amet rhoncus felis. Aliquam quis bibendum ex, non aliquam nibh. Mauris
28		pretium, nibh in ullamcorper imperdiet, nibh arcu mollis felis, ac
29		efficitur lacus orci ac diam. Proin accumsan urna eu elementum aliquam.
30		Quisque dapibus sagittis nunc nec accumsan. Aenean mollis, risus eget
31		viverra aliquam, mi neque dignissim ipsum, nec congue odio nibh id
32		quam.</p>
33
34		<p>Quisque a feugiat dolor. Nullam volutpat velit ut justo fringilla,
35		eu sodales magna commodo. Suspendisse posuere eget libero eu molestie.
36		Suspendisse elit eros, ultrices in bibendum sit amet, dignissim quis
37		justo. Praesent auctor massa non varius rhoncus. Pellentesque augue
38		elit, dictum in tortor eu, congue semper augue. Phasellus interdum
39		malesuada lorem.</p>
40
41		<script src="index.js"></script>
42		<script>
43			var searcher = new TextNodeSearcher(document.body);
44			var input = document.getElementById("search");
45
46			input.focus();
47			searcher.setQuery(input.value);
48
49			input.onkeyup = function () {
50				searcher.setQuery(this.value);
51				searcher.highlight();
52			};
53			input.onkeydown = function (e) {
54				if (e.keyCode == 13) { // Enter
55					if (e.shiftKey)
56						searcher.selectPrevious();
57					else
58						searcher.selectNext();
59				} else if (e.keyCode == 27) { // Escape
60					searcher.unhighlight();
61				}
62			};
63
64			document.getElementById("next-btn").onclick = function () {
65				searcher.highlight();
66				searcher.selectNext();
67			};
68			document.getElementById("prev-btn").onclick = function () {
69				searcher.highlight();
70				searcher.selectPrevious();
71			};
72		</script>
73	</body>
74</html>
75

Built with git-ssb-web