minimal typeahead

R = React.DOM

nations = ['britain', 'ireland', 'norway', 'sweden', 'denmark', 'germany',
  'holland', 'belgium', 'france', 'spain', 'portugal', 'italy', 'switzerland']

Typeahead = React.createClass
  getInitialState : -> {input: ""}
  handleChange    : -> @setState input: @refs.field.getDOMNode().value
  handleClick     : (nation)-> @setState input: nation
  matches         : (input)->
    regex = new RegExp(input, "i")
    _.select nations, (nation)-> nation.match(regex) && nation != input
  render: ->
    R.div {},
      R.input {ref:'field', onChange: @handleChange, value: @state.input}
      R.br {}
      _.map @matches(@state.input), (nation)=>
        Button {handleClick: @handleClick, name: nation}

Button = React.createClass
  onClick: -> @props.handleClick(@props.name)
  render:  ->
    classes = "btn btn-xs btn-default"
    R.button {className: classes, onClick: @onClick}, @props.name

$(document).ready ->
  React.render React.createFactory(Typeahead)(), $('#typetest')[0]

simple typeahead example - relies on react, coffeescript and lodash - uses bootstrap3 button classes.
the component will render into a div with id == #typetest.

This would get a bit more complicated with an ajax request for data.

What language is this? coffee?

👍

Any chance to get working jsfiddle link for this?

I would also like to see this. simplified as much as possible.

Nice thanks, I decided to covert it to JavaScript ES6, take a look here:
https://gist.github.com/Eightyplus/63aba24abf1db13f79cf5793e20129b5