Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. tiralcodes
    3. Topics
    T
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Topics created by tiralcodes

    • T

      ons-input and datalist
      Onsen UI • onsen ui 2.0 ons-input autocomplete datalist • • tiralcodes

      5
      0
      Votes
      5
      Posts
      3307
      Views

      E

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

      textarea
      Onsen UI • onsen ui 2.0 textarea • • tiralcodes

      3
      0
      Votes
      3
      Posts
      4607
      Views

      T

      Thanks fran! I’ll be looking for your update and more power!