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


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