Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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(); }