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.

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