Monaca Onsen UI Discord Chat Github Repo

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.

    I am trying to create an autocomplete textbox

  • Onsen UI

    @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 the input 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

  • administrators

    @geraldineak How about this?

    You can copy and paste it into the playground to try it:


      <p style="text-align: center; margin-top: 10px;">
        <ons-lazy-repeat id="infinite-list"></ons-lazy-repeat>


    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;
    // 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));
    // sets input value to clicked option
    function fill(clickedOption) {
      document.getElementById('search').value = clickedOption;
      shownItems = [];