-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (140 loc) · 5.65 KB
/
index.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/autocomplete.min.css">
<link rel="stylesheet" href="css/autocomplete-theme.min.css">
<style>
body{
font-family: sans-serif;
text-align: center;
padding-bottom: 400px;
}
#main{
width: 100%;
text-align: left;
}
h1{
margin-top: 60px;
}
h2{
margin-top: 60px;
}
@media screen and (min-width: 768px) {
#main{
width: 30%;
margin: auto;
}
}
</style>
</head>
<body>
<div id="main">
<h1>Autocomplete for Native Javascript</h1>
<p>autocomplete snippet for HTML input fields build with native javascript and no dependencies</p>
<p>
This snippet:
<ul>
<li>is built with **native javascript**</li>
<li>is built with <b>native javascript</b></li>
<li>requires <b>no dependencies</b></li>
<li>can be used <b>with OR without AJAX</b></li>
<li>highy <b>customizable</b> yet very <b>simple</b></li>
<li>user experience is <b>inspired from Google search</b></li>
</ul>
</p>
<h2>Without AJAX (list array)</h2>
<p>Search for 'apple', 'applepie', 'abacus', 'grape', 'watermelon', 'cherry'</p>
<input id="search_wihtout_ajax" class="ac-input-default" type="text" placeholder="Search..." autocomplete="off">
<h2>Without AJAX (list array) and Custom Search Function</h2>
<p>Search for 'apple', 'applepie', 'abacus', 'grape', 'watermelon', 'cherry'</p>
<input id="search_wihtout_ajax_custom_search" class="ac-input-default" type="text" placeholder="Search..." autocomplete="off">
<h2>Built-in AJAX</h2>
<p>Search for anime names</p>
<input id="search_auto_ajax" class="ac-input-default" type="text" placeholder="Search..." autocomplete="off">
<h2>Custom AJAX Handler</h2>
<input id="search_manual_ajax" class="ac-input-default" type="text" placeholder="Search..." autocomplete="off">
</div>
<script src="js/autocomplete.min.js"></script>
<script>
var autocomplete = new Autocomplete({
selector: "#search_wihtout_ajax",
minChar: 1,
delay: 100,
list: ['apple', 'applepie', 'abacus', 'grape', 'watermelon', 'cherry'],
submitHandler: function(str){
alert("Submitted: "+str)
}
})
var autocomplete = new Autocomplete({
selector: "#search_wihtout_ajax_custom_search",
minChar: 1,
delay: 100,
list: ['apple', 'applepie', 'abacus', 'grape', 'watermelon', 'cherry'],
customSearch: function(value, list){
var regexp = new RegExp(value.toLowerCase().trim())
var results = list.filter(v=>regexp.test(v)).sort()
return results
},
submitHandler: function(str){
alert("Submitted: "+str)
}
})
var autocomplete = new Autocomplete({
selector: "#search_auto_ajax",
minChar: 1,
maxListHeight: 400,
ajax: {
method: "GET",
url: "https://kitsu.io/api/edge/anime",
withCredentials: false,
fields: "?fields[anime]=titles&page[limit]=10&filter[text]",
responseHandler: function(response){
var array = JSON.parse(response).data
.map(v=>v.attributes.titles.en || v.attributes.titles.en_jp)
.filter(v=>v) // remove false/undefined values
return array
},
},
beforeAjax : function(search){
return search.toLowerCase()
},
submitHandler: function(str){
alert("Submitted: "+str)
}
})
var autocomplete = new Autocomplete({
selector: "#search_manual_ajax",
minChar: 1,
manualAjax: function(value){
return new Promise(function(resolve, reject){
var request = new XMLHttpRequest();
request.open('GET', 'https://kitsu.io/api/edge/anime?fields[anime]=titles&page[limit]=10&filter[text]='+value, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var array = JSON.parse(request.responseText).data
.map(v=>v.attributes.titles.en || v.attributes.titles.en_jp)
.filter(v=>v) // remove false/undefined values
resolve(array)
}
};
request.onerror = function(e) {
console.log('something went wrong');
reject(e)
};
request.send();
})
},
beforeAjax : function(search){
return search.toLowerCase()
},
submitHandler: function(str){
alert("Submitted: "+str)
}
})
</script>
</body>
</html>