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