Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://unpkg.com/manuel@0.62.0/dist/style.css">
  <title>JS Bin</title>
</head>
<body>
  <script src="https://unpkg.com/manuel@0.63.0/dist/manuel.js"></script>
  <script src="https://unpkg.com/mithril@1.1.3/mithril.min.js"></script>
​
  <script>
    
    const pojo = {
​
      // the current value in the input field
      input: 'rr'
​
      // the value of the currently selected
      // value in the suggestions list
      , highlight: ''
​
​
      // the list of suggestions
      , list: [
        'Banana 🍌'
        ,'Cherry 🍒'
        ,'Watermelon 🍉'
        ,'Kiwi 🥝'
        ,'Strawberry 🍓'
        , 'Peaches 🍑'
      ]
​
      // whether or not the suggestions list should be open
      ,open: true
​
      // The value of an item that was explicitly
      //  selected from the list
      ,chosen: null
    }
    
    const autocomplete = manuel({
      hyperscript: m
      
      ,get: key => pojo[key]
      // set
      ,set: (key, value) => {
        pojo[key] = value
      }
    })
​
    const App = {
      view(){
        return m(
          'label', 'Search for fruit (Try Kiwi)'
          ,autocomplete({
            input: 'input'
            ,highlight: 'highlight'
            ,open: 'open'
            ,chosen: 'chosen'
            ,list: 'list'
          })
        )
      }
    }
​
    m.mount(document.body, App)
  </script>
  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JAForbespro
0viewers