ons-input and datalist
-
Hi,
Does ons-input support datalist?
Data is showing when I inspect the datalist, however ons-input does not show suggested data based from the user input.Any ideas? Thanks.
PS
I am trying to create an autocomplete textbox
-
@tiralcodes datalist is not very well supported by browsers yet. Therefore, I think we don’t need to worry about it yet. You can just use
ons-input
+ons-list
in order to display the entries. Just save every entry into an array and then use theinput
event to filter.
-
Got the idea man! Thanks again fran!
-
is there any example of usage of ons-input + ons-list as datalist you mentioned @Fran-Diox ? i still don’t get how to implement that
-
@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(); }