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]