-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
105 lines (99 loc) · 3.35 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<title>test autocomplete</title>
<link rel="shortcut icon" href="DGFavicon.png"/>
<meta charset="utf-8">
<script type="text/javascript" src="shac.js"></script>
<style type="text/css">
/*autocomplete-specific stuff:*/
.autocompletion_drop{
position: absolute;
pointer-events:none;
margin-left: -10px;
-webkit-transition: all 230ms ease-out;
-moz-transition: all 230ms ease-out;
-ms-transition: all 230ms ease-out;
transition: all 230ms ease-out;
border-radius: 3px;
font-size: 19px;
opacity: 0;
background-color: rgba(0,0,0, 0.9);
}
.autocompletion_drop.visible{
margin-left: 0px;
opacity: 1;
}
.autocompletion_match{
font-family: monospace;
background-color: rgba(0,0,0, 1);
margin-bottom: 4px;
padding-left: 3px;
padding-right: 3px;
color: rgb(178,178,178);
}
*.autocompletion_match + *.autocompletion_match {
color: rgb(178,178,178);
background-color: rgba(0,0,0, 0.16);
}
.autocompletion_matching_letter{
font-weight: 800;
color: white;
}
/*page stuff:*/
body{ font-family: sans-serif; }
.result{ margin-left: 25px; }
input{
border-radius: 4px;
border: none;
background-color: rgb(245,245,245);
}
#in_box{
display: inline-block;
border-radius: 14px;
padding: 13px;
background-color: rgb(230 ,230,230);
}
.flash{
-webkit-animation: anflash 600ms ease-in-out;
-moz-animation: anflash 600ms ease-in-out;
-ms-animation: anflash 600ms ease-in-out;
-o-animation: anflash 600ms ease-in-out;
animation: anflash 600ms ease-in-out;
}
@-webkit-keyframes anflash{ 0%{ opacity: 1 } 50%{ opacity: 0 } 100%{ opacity: 1 } }
@-moz-keyframes anflash{ 0%{ opacity: 1 } 50%{ opacity: 0 } 100%{ opacity: 1 } }
@-ms-keyframes anflash{ 0%{ opacity: 1 } 50%{ opacity: 0 } 100%{ opacity: 1 } }
@-o-keyframes anflash{ 0%{ opacity: 1 } 50%{ opacity: 0 } 100%{ opacity: 1 } }
@keyframes anflash{ 0%{ opacity: 1 } 50%{ opacity: 0 } 100%{ opacity: 1 } }
</style>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(){
var inputElement = document.getElementById('input');
var inBox = document.getElementById('in_box');
inputElement.focus();
var resultList = ['Blinding Lantern Smith', 'Hopeful Woods', 'blustery_green', 'Stone Sword', 'LoathingLights', 'Empty_parrot', 'versitility', 'version', 'document32', 'orson snot lard', 'green-temple', 'ShortHand AutoCompleter', 'Laden Wind', 'Hollow Wind', ];
var ac = attachAutocompletion(
inputElement,
resultList,
function(key){
//flash the selected item
inBox.children[key].classList.remove('flash');
setTimeout(function(){ inBox.children[key].classList.add('flash'); }, 16); //Gecko why are you so inattentive that I have to leave it removed for 16 ms for you to notice a change occurred, I shouldn't have to leave it at all. Webkit's bad too, it wont notice a change if I add the class during this function call, but at least I don't have to wait around for longer than a single yeild.
}
);
//(puts the resultList on the page)
resultList.forEach(function(te){
var noteel = document.createElement('div');
noteel.classList.add('in_box_item');
noteel.textContent = te;
inBox.appendChild(noteel);
});
});
</script>
</head>
<body>
<div id="in_box"></div>
<input id="input">
</body>
</html>