Skip to content

Commit 7af373d

Browse files
nolimits4webnolimits4web
committed
feat(autocomplete): m3 styles, remove expandInput functioanlity
1 parent e2685f9 commit 7af373d

File tree

10 files changed

+74
-318
lines changed

10 files changed

+74
-318
lines changed

‎TODO.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
- Picker
77
- Color Picker
88

9-
- Autocomplete
10-
- Remove input expand
119
- Menu???
1210
- PhotoBrowser
1311
- Preloader

‎kitchen-sink/core/pages/autocomplete.html‎

Lines changed: 23 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,7 @@
4343
</li>
4444
</ul>
4545
</div>
46-
<div class="list no-hairlines-md">
47-
<div class="block-header">Dropdown With Input Expand</div>
48-
<ul>
49-
<li class="item-content item-input">
50-
<div class="item-inner">
51-
<div class="item-title item-label">Fruit</div>
52-
<div class="item-input-wrap">
53-
<input type="text" placeholder="Fruit" id="autocomplete-dropdown-expand" />
54-
</div>
55-
</div>
56-
</li>
57-
</ul>
58-
</div>
46+
5947
<div class="list no-hairlines-md">
6048
<div class="block-header">Dropdown With All Values</div>
6149
<ul>
@@ -191,7 +179,6 @@
191179

192180
let searchbar;
193181
let autocompleteDropdownSimple;
194-
let autocompleteDropdownExpand;
195182
let autocompleteDropdownAll;
196183
let autocompleteDropdownPlaceholder;
197184
let autocompleteDropdownTypeahead;
@@ -205,7 +192,6 @@
205192
$onBeforeUnmount(() => {
206193
searchbar.destroy();
207194
autocompleteDropdownSimple.destroy();
208-
autocompleteDropdownExpand.destroy();
209195
autocompleteDropdownAll.destroy();
210196
autocompleteDropdownPlaceholder.destroy();
211197
autocompleteDropdownTypeahead.destroy();
@@ -237,26 +223,6 @@
237223
}
238224
});
239225

240-
// Dropdown with input expand
241-
autocompleteDropdownExpand = $f7.autocomplete.create({
242-
inputEl: '#autocomplete-dropdown-expand',
243-
openIn: 'dropdown',
244-
expandInput: true, // expand input
245-
source: function (query, render) {
246-
var results = [];
247-
if (query.length === 0) {
248-
render(results);
249-
return;
250-
}
251-
// Find matched items
252-
for (var i = 0; i < fruits.length; i++) {
253-
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
254-
}
255-
// Render items by passing array with result items
256-
render(results);
257-
}
258-
});
259-
260226
// Dropdown with all values
261227
autocompleteDropdownAll = $f7.autocomplete.create({
262228
inputEl: '#autocomplete-dropdown-all',
@@ -334,25 +300,19 @@
334300
autocomplete.preloaderShow();
335301

336302
// Do Ajax request to Autocomplete data
337-
$f7.request({
338-
url: './js/autocomplete-languages.json',
339-
method: 'GET',
340-
dataType: 'json',
341-
//send "query" to server. Useful in case you generate response dynamically
342-
data: {
343-
query: query,
344-
},
345-
success: function (data) {
303+
fetch(`./js/autocomplete-languages.json?query=${query}`)
304+
.then((res) => res.json())
305+
.then((data) => {
346306
// Find matched items
347-
for (var i = 0; i < data.length; i++) {
348-
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
307+
for (let i = 0; i < data.length; i += 1) {
308+
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
309+
results.push(data[i]);
349310
}
350311
// Hide Preoloader
351312
autocomplete.preloaderHide();
352313
// Render items by passing array with result items
353314
render(results);
354-
}
355-
});
315+
});
356316
}
357317
});
358318

@@ -378,25 +338,19 @@
378338
autocomplete.preloaderShow();
379339

380340
// Do Ajax request to Autocomplete data
381-
$f7.request({
382-
url: './js/autocomplete-languages.json',
383-
method: 'GET',
384-
dataType: 'json',
385-
//send "query" to server. Useful in case you generate response dynamically
386-
data: {
387-
query: query,
388-
},
389-
success: function (data) {
341+
fetch(`./js/autocomplete-languages.json?query=${query}`)
342+
.then((res) => res.json())
343+
.then((data) => {
390344
// Find matched items
391-
for (var i = 0; i < data.length; i++) {
392-
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
345+
for (let i = 0; i < data.length; i += 1) {
346+
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
347+
results.push(data[i]);
393348
}
394349
// Hide Preoloader
395350
autocomplete.preloaderHide();
396351
// Render items by passing array with result items
397352
render(results);
398-
}
399-
});
353+
});
400354
}
401355
});
402356

@@ -504,26 +458,21 @@
504458
}
505459
// Show Preloader
506460
autocomplete.preloaderShow();
461+
507462
// Do Ajax request to Autocomplete data
508-
$f7.request({
509-
url: './js/autocomplete-languages.json',
510-
method: 'GET',
511-
dataType: 'json',
512-
//send "query" to server. Useful in case you generate response dynamically
513-
data: {
514-
query: query
515-
},
516-
success: function (data) {
463+
fetch(`./js/autocomplete-languages.json?query=${query}`)
464+
.then((res) => res.json())
465+
.then((data) => {
517466
// Find matched items
518-
for (var i = 0; i < data.length; i++) {
519-
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
467+
for (let i = 0; i < data.length; i += 1) {
468+
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
469+
results.push(data[i]);
520470
}
521471
// Hide Preoloader
522472
autocomplete.preloaderHide();
523473
// Render items by passing array with result items
524474
render(results);
525-
}
526-
});
475+
});
527476
},
528477
on: {
529478
change: function (value) {

‎kitchen-sink/react/src/pages/autocomplete.jsx‎

Lines changed: 13 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export default () => {
1818
const fruits = 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' ');
1919

2020
const autocompleteDropdownSimple = useRef(null);
21-
const autocompleteDropdownExpand = useRef(null);
2221
const autocompleteDropdownAll = useRef(null);
2322
const autocompleteDropdownPlaceholder = useRef(null);
2423
const autocompleteDropdownTypeahead = useRef(null);
@@ -33,7 +32,6 @@ export default () => {
3332
const onPageBeforeRemove = () => {
3433
// Destroy all autocompletes
3534
autocompleteDropdownSimple.current.destroy();
36-
autocompleteDropdownExpand.current.destroy();
3735
autocompleteDropdownAll.current.destroy();
3836
autocompleteDropdownPlaceholder.current.destroy();
3937
autocompleteDropdownTypeahead.current.destroy();
@@ -67,26 +65,6 @@ export default () => {
6765
},
6866
});
6967

70-
// Dropdown with input expand
71-
autocompleteDropdownExpand.current = f7.autocomplete.create({
72-
inputEl: '#autocomplete-dropdown-expand',
73-
openIn: 'dropdown',
74-
expandInput: true, // expand input
75-
source(query, render) {
76-
const results = [];
77-
if (query.length === 0) {
78-
render(results);
79-
return;
80-
}
81-
// Find matched items
82-
for (let i = 0; i < fruits.length; i += 1) {
83-
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
84-
}
85-
// Render items by passing array with result items
86-
render(results);
87-
},
88-
});
89-
9068
// Dropdown with all values
9169
autocompleteDropdownAll.current = f7.autocomplete.create({
9270
inputEl: '#autocomplete-dropdown-all',
@@ -164,15 +142,9 @@ export default () => {
164142
autocomplete.preloaderShow();
165143

166144
// Do Ajax request to Autocomplete data
167-
f7.request({
168-
url: './autocomplete-languages.json',
169-
method: 'GET',
170-
dataType: 'json',
171-
// send "query" to server. Useful in case you generate response dynamically
172-
data: {
173-
query,
174-
},
175-
success(data) {
145+
fetch(`./js/autocomplete-languages.json?query=${query}`)
146+
.then((res) => res.json())
147+
.then((data) => {
176148
// Find matched items
177149
for (let i = 0; i < data.length; i += 1) {
178150
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
@@ -182,8 +154,7 @@ export default () => {
182154
autocomplete.preloaderHide();
183155
// Render items by passing array with result items
184156
render(results);
185-
},
186-
});
157+
});
187158
},
188159
});
189160

@@ -209,26 +180,19 @@ export default () => {
209180
autocomplete.preloaderShow();
210181

211182
// Do Ajax request to Autocomplete data
212-
f7.request({
213-
url: './autocomplete-languages.json',
214-
method: 'GET',
215-
dataType: 'json',
216-
// send "query" to server. Useful in case you generate response dynamically
217-
data: {
218-
query,
219-
},
220-
success(data) {
183+
fetch(`./js/autocomplete-languages.json?query=${query}`)
184+
.then((res) => res.json())
185+
.then((data) => {
221186
// Find matched items
222187
for (let i = 0; i < data.length; i += 1) {
223-
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0)
188+
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
224189
results.push(data[i]);
225190
}
226191
// Hide Preoloader
227192
autocomplete.preloaderHide();
228193
// Render items by passing array with result items
229194
render(results);
230-
},
231-
});
195+
});
232196
},
233197
});
234198

@@ -335,15 +299,9 @@ export default () => {
335299
// Show Preloader
336300
autocomplete.preloaderShow();
337301
// Do Ajax request to Autocomplete data
338-
f7.request({
339-
url: './autocomplete-languages.json',
340-
method: 'GET',
341-
dataType: 'json',
342-
// send "query" to server. Useful in case you generate response dynamically
343-
data: {
344-
query,
345-
},
346-
success(data) {
302+
fetch(`./js/autocomplete-languages.json?query=${query}`)
303+
.then((res) => res.json())
304+
.then((data) => {
347305
// Find matched items
348306
for (let i = 0; i < data.length; i += 1) {
349307
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
@@ -353,8 +311,7 @@ export default () => {
353311
autocomplete.preloaderHide();
354312
// Render items by passing array with result items
355313
render(results);
356-
},
357-
});
314+
});
358315
},
359316
on: {
360317
change(value) {
@@ -422,15 +379,6 @@ export default () => {
422379
<ListInput label="Fruit" type="text" placeholder="Fruit" inputId="autocomplete-dropdown" />
423380
</List>
424381

425-
<List noHairlinesMd>
426-
<BlockHeader>Dropdown With Input Expand</BlockHeader>
427-
<ListInput
428-
label="Fruit"
429-
type="text"
430-
placeholder="Fruit"
431-
inputId="autocomplete-dropdown-expand"
432-
/>
433-
</List>
434382
<List noHairlinesMd>
435383
<BlockHeader>Dropdown With All Values</BlockHeader>
436384
<ListInput

0 commit comments

Comments
 (0)