autocomplete.js

const html = require('yo-yo')

const struct = require('observ-struct')
const value = require('observ')
const list = require('observ-array')
const EventEmitter = require('event').Emitter

function autocomplete () {
  var state = struct({
    name: value(Math.random().toString(16)),
    options: list([]),
    iconClass: value('dropdown')
  })

  var element = render(state())
  var emitter = new EventEmitter()

  state(function (state) {
    html.update(element, render(state))
  })

  return {
    element,
    name: getset(state.name),
    options: getset(state.options),
    on: emitter.on
  }

  function render (state) {
    return html`<div class="ui dropdown">
          <input type="hidden" name="${state.name}">
          <i class="${state.iconClass} icon"></i>
          <div class="menu">
            ${state.options.map(option)}
          </div>
        </div>`
  }

  function option (option) {
    return html`<div class="item" data-value="${option.value}">${option.content}</div>`
  }
}

function getset (o) {
  return function (val) {
    if (val === undefined) return o()
    return o.set(val)
  }
}

index.js

const autocomplete = require('./autocomplete')

var ac = autocomplete()

ac.name('countries')
ac.options([
  {value: 'au', content: 'Australia'},
  {value: 'dk', content: 'Denmark'}
])

document.body.appendChild(ac)