-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
126 lines (118 loc) · 2.3 KB
/
example.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example of autocompleteTextarea</title>
<link rel="stylesheet" type="text/css" href="lib/jquery.annotatetextarea.css">
<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.annotatetextarea.js"></script>
<script type="text/javascript" src="src/autocomp.js"></script>
<script type="text/javascript">
function init() {
function generate_concepts(s_array,cat) {
return s_array.map(function(arr) {
if(typeof(arr) === "string") {
arr = [arr,arr+'s'];
}
return {text: arr, label: arr[0], class: cat};
});
}
list_fruits = [
"apple",
"apricot",
"avocado",
"banana",
"breadfruit",
["bilberry","bilberries"],
["blackberry","blackberries"],
"blackcurrant",
["blueberry","blueberries"],
["boysenberry","boysenberries"],
"cantaloupe",
"currant",
["cherry","cherries"],
"cherimoya",
["cloudberry","cloudberries"],
"coconut",
["cranberry","cranberries"],
"cucumber",
"damson",
"date",
"dragonfruit",
"durian",
"eggplant",
"elderberry",
"feijoa",
"fig",
"goji berry",
"gooseberry",
"grape",
"grapefruit",
"guava",
"guckleberry",
"goneydew",
"jackfruit",
"jambul",
"jujube",
"kiwi fruit",
"kumquat",
"lemon",
"lime",
"loquat",
["lychee","litchi","litchis","lychees"],
"mango",
"melon",
"mulberry",
"nectarine",
"nut",
"olive",
"orange",
"pamelo",
"papaya",
"passionfruit",
"peach",
"pepper",
"pear",
"persimmon",
"physalis",
"pineapple",
"pomegranate",
"pomelo",
"quince",
"raspberry",
"rambutan",
"salal berry",
"satsuma",
"star fruit",
"strawberry",
"tamarillo",
"watermelon"
];
concepts = generate_concepts(list_fruits,"fruit");
new Autocompleter("text",concepts);
new Autocompleter("input",concepts);
}
$(window).load(init);
</script>
</head>
<body>
<style type="text/css">
.fruit {
background-color: lightgreen;
border-radius: 5px;
}
.autocomplete {
background-color: LightGrey;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.Autocompleter .selected {
background-color: LightGrey;
}
</style>
<div>
<textarea id="text" style="width:370px;height:100px;"></textarea>
<input id="input" type="text"></input>
</div>
</body>
</html>