Skip to content

Commit

Permalink
feat(autocomplete): m3 styles, remove expandInput functioanlity
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Oct 12, 2022
1 parent e2685f9 commit 7af373d
Show file tree
Hide file tree
Showing 10 changed files with 74 additions and 318 deletions.
2 changes: 0 additions & 2 deletions TODO.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@
- Picker
- Color Picker

- Autocomplete
- Remove input expand
- Menu???
- PhotoBrowser
- Preloader
Expand Down
97 changes: 23 additions & 74 deletions kitchen-sink/core/pages/autocomplete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,7 @@
</li>
</ul>
</div>
<div class="list no-hairlines-md">
<div class="block-header">Dropdown With Input Expand</div>
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Fruit</div>
<div class="item-input-wrap">
<input type="text" placeholder="Fruit" id="autocomplete-dropdown-expand" />
</div>
</div>
</li>
</ul>
</div>

<div class="list no-hairlines-md">
<div class="block-header">Dropdown With All Values</div>
<ul>
Expand Down Expand Up @@ -191,7 +179,6 @@

let searchbar;
let autocompleteDropdownSimple;
let autocompleteDropdownExpand;
let autocompleteDropdownAll;
let autocompleteDropdownPlaceholder;
let autocompleteDropdownTypeahead;
Expand All @@ -205,7 +192,6 @@
$onBeforeUnmount(() => {
searchbar.destroy();
autocompleteDropdownSimple.destroy();
autocompleteDropdownExpand.destroy();
autocompleteDropdownAll.destroy();
autocompleteDropdownPlaceholder.destroy();
autocompleteDropdownTypeahead.destroy();
Expand Down Expand Up @@ -237,26 +223,6 @@
}
});

// Dropdown with input expand
autocompleteDropdownExpand = $f7.autocomplete.create({
inputEl: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expand input
source: function (query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (var i = 0; i < fruits.length; i++) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
}
// Render items by passing array with result items
render(results);
}
});

// Dropdown with all values
autocompleteDropdownAll = $f7.autocomplete.create({
inputEl: '#autocomplete-dropdown-all',
Expand Down Expand Up @@ -334,25 +300,19 @@
autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
$f7.request({
url: './js/autocomplete-languages.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
query: query,
},
success: function (data) {
fetch(`./js/autocomplete-languages.json?query=${query}`)
.then((res) => res.json())
.then((data) => {
// Find matched items
for (var i = 0; i < data.length; i++) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
for (let i = 0; i < data.length; i += 1) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(data[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
}
});
});
}
});

Expand All @@ -378,25 +338,19 @@
autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
$f7.request({
url: './js/autocomplete-languages.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
query: query,
},
success: function (data) {
fetch(`./js/autocomplete-languages.json?query=${query}`)
.then((res) => res.json())
.then((data) => {
// Find matched items
for (var i = 0; i < data.length; i++) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
for (let i = 0; i < data.length; i += 1) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(data[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
}
});
});
}
});

Expand Down Expand Up @@ -504,26 +458,21 @@
}
// Show Preloader
autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
$f7.request({
url: './js/autocomplete-languages.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
query: query
},
success: function (data) {
fetch(`./js/autocomplete-languages.json?query=${query}`)
.then((res) => res.json())
.then((data) => {
// Find matched items
for (var i = 0; i < data.length; i++) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
for (let i = 0; i < data.length; i += 1) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(data[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
}
});
});
},
on: {
change: function (value) {
Expand Down
78 changes: 13 additions & 65 deletions kitchen-sink/react/src/pages/autocomplete.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default () => {
const fruits = 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' ');

const autocompleteDropdownSimple = useRef(null);
const autocompleteDropdownExpand = useRef(null);
const autocompleteDropdownAll = useRef(null);
const autocompleteDropdownPlaceholder = useRef(null);
const autocompleteDropdownTypeahead = useRef(null);
Expand All @@ -33,7 +32,6 @@ export default () => {
const onPageBeforeRemove = () => {
// Destroy all autocompletes
autocompleteDropdownSimple.current.destroy();
autocompleteDropdownExpand.current.destroy();
autocompleteDropdownAll.current.destroy();
autocompleteDropdownPlaceholder.current.destroy();
autocompleteDropdownTypeahead.current.destroy();
Expand Down Expand Up @@ -67,26 +65,6 @@ export default () => {
},
});

// Dropdown with input expand
autocompleteDropdownExpand.current = f7.autocomplete.create({
inputEl: '#autocomplete-dropdown-expand',
openIn: 'dropdown',
expandInput: true, // expand input
source(query, render) {
const results = [];
if (query.length === 0) {
render(results);
return;
}
// Find matched items
for (let i = 0; i < fruits.length; i += 1) {
if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
}
// Render items by passing array with result items
render(results);
},
});

// Dropdown with all values
autocompleteDropdownAll.current = f7.autocomplete.create({
inputEl: '#autocomplete-dropdown-all',
Expand Down Expand Up @@ -164,15 +142,9 @@ export default () => {
autocomplete.preloaderShow();

// Do Ajax request to Autocomplete data
f7.request({
url: './autocomplete-languages.json',
method: 'GET',
dataType: 'json',
// send "query" to server. Useful in case you generate response dynamically
data: {
query,
},
success(data) {
fetch(`./js/autocomplete-languages.json?query=${query}`)
.then((res) => res.json())
.then((data) => {
// Find matched items
for (let i = 0; i < data.length; i += 1) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
Expand All @@ -182,8 +154,7 @@ export default () => {
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
},
});
});
},
});

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

// Do Ajax request to Autocomplete data
f7.request({
url: './autocomplete-languages.json',
method: 'GET',
dataType: 'json',
// send "query" to server. Useful in case you generate response dynamically
data: {
query,
},
success(data) {
fetch(`./js/autocomplete-languages.json?query=${query}`)
.then((res) => res.json())
.then((data) => {
// Find matched items
for (let i = 0; i < data.length; i += 1) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0)
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(data[i]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
},
});
});
},
});

Expand Down Expand Up @@ -335,15 +299,9 @@ export default () => {
// Show Preloader
autocomplete.preloaderShow();
// Do Ajax request to Autocomplete data
f7.request({
url: './autocomplete-languages.json',
method: 'GET',
dataType: 'json',
// send "query" to server. Useful in case you generate response dynamically
data: {
query,
},
success(data) {
fetch(`./js/autocomplete-languages.json?query=${query}`)
.then((res) => res.json())
.then((data) => {
// Find matched items
for (let i = 0; i < data.length; i += 1) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0)
Expand All @@ -353,8 +311,7 @@ export default () => {
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
},
});
});
},
on: {
change(value) {
Expand Down Expand Up @@ -422,15 +379,6 @@ export default () => {
<ListInput label="Fruit" type="text" placeholder="Fruit" inputId="autocomplete-dropdown" />
</List>

<List noHairlinesMd>
<BlockHeader>Dropdown With Input Expand</BlockHeader>
<ListInput
label="Fruit"
type="text"
placeholder="Fruit"
inputId="autocomplete-dropdown-expand"
/>
</List>
<List noHairlinesMd>
<BlockHeader>Dropdown With All Values</BlockHeader>
<ListInput
Expand Down
Loading

0 comments on commit 7af373d

Please sign in to comment.