ons-input and datalist

[tiralcodes]

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

[Fran Diox]

@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.

[tiralcodes]

Got the idea man! Thanks again fran!

[Geraldineak]

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

[emccorson]

@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();
}