-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (122 loc) · 3.89 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
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container{
width: 600px;
margin: 50px auto;
}
div{
margin-bottom: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script src="/dist/chosen-remote-source.js" ></script>
<script>
$(function(){
// Mock Ajax Responses
var set_ajax_response = function(data){
$.ajax = $.Deferred().resolve(data).promise;
}
var setNewResponseData = function(data){
if(!data){
var data = [];
for(var i=0; i < 250; i++){
random = Math.random().toString(36).substring(7),
data.push({
value: random,
label: random,
})
}
}
set_ajax_response(data);
};
setNewResponseData();
// CHANGE AJAX RESPONSE EVERY 5 SECONDS
setInterval(function(){
setNewResponseData();
console.log("Generated new Mock AJAX response data");
}, 5000);
// SETUP INITIAL SELECT OPTIONS WHEN PAGE IS LOADED
var sample_options = []
for(var i=0; i < 250; i++){
random = Math.random().toString(36).substring(7),
sample_options.push("<option>"+random+"</option>");
}
sample_options = sample_options.join("")
$("select").html(sample_options);
});
</script>
<script>
$(function(){
// SETUP AND INITIALIZATION
$('select.is-chosen').chosen({
hide_results_on_select: false,
width: '100%',
});
$('select#chosen-remote-source-single').chosenRemoteSource({url: "/my-path"});
$('select#chosen-remote-source-multi').chosenRemoteSource({url: "/my-path"});
$('select#chosen-remote-source-kitchen-sink').chosenRemoteSource({
url: "/my-path",
method: 'GET',
delay: 250,
event: 'input',
label_field: 'label',
value_field: 'value',
search_param: 'q',
selected_param: 'selected',
});
});
</script>
<script>
$(function(){
// PUT AUTOMATED TESTS HERE
// TEST ON PLAIN SELECT, THAT IT DOESNT ERROR
$('select').chosenRemoteSource({url: "/my-path"});
});
</script>
</head>
<body>
<div class='container'>
<div>
<strong>Plain Select</strong>
<select>
<option></option>
<option>Foobar</option>
</select>
</div>
<div>
<strong>Normal Chosen Select</strong>
<select class='is-chosen'>
<option></option>
<option>Foobar</option>
</select>
</div>
<div>
<strong>Chosen Remote Source Select Minimal - Single Select</strong>
<select class='is-chosen' id='chosen-remote-source-single'>
<option></option>
<option>Foobar</option>
</select>
</div>
<div>
<strong>Chosen Remote Source Select Minimal- Multiple Select</strong>
<select multiple="true" class='is-chosen' id='chosen-remote-source-multi'>
<option></option>
<option>Foobar</option>
</select>
</div>
<div>
<strong>Chosen Remote Source Select Kitchen Sink - Single Select</strong>
<select class='is-chosen chosen' id='chosen-remote-source-kitchen-sink'>
<option></option>
<option>Foobar</option>
</select>
</div>
</div>
</body>
</html>