E
@geraldineak How about this?
You can copy and paste it into the playground to try it:
https://onsen.io/playground/
HTML
<ons-page>
<p style="text-align: center; margin-top: 10px;">
<ons-search-input
placeholder="Search"
oninput="input()"
id="search"
></ons-search-input>
</p>
<ons-list>
<ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>
</ons-list>
</ons-page>
JS
const allItems = ['hey', 'there', 'here', 'are', 'some', 'options'];
let shownItems = [];
ons.ready(function() {
const infiniteList = document.getElementById('infinite-list');
infiniteList.delegate = {
createItemContent: function(i) {
const element = ons.createElement('<ons-list-item>' + shownItems[i] + '</ons-list-item>');
element.onclick = () => fill(shownItems[i]);
return element;
},
countItems: function() {
return shownItems.length;
}
};
infiniteList.refresh();
});
// updates list of options on input
function input() {
const inputValue = document.getElementById('search').value;
if (inputValue === '') {
shownItems = [];
} else {
shownItems = allItems.filter(item => item.startsWith(inputValue));
}
document.getElementById('infinite-list').refresh();
}
// sets input value to clicked option
function fill(clickedOption) {
document.getElementById('search').value = clickedOption;
shownItems = [];
document.getElementById('infinite-list').refresh();
}
