Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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]
@andyl

This comment has been minimized.

Copy link
Owner Author

commented Dec 6, 2014

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

@justin808

This comment has been minimized.

Copy link

commented Dec 7, 2014

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

@avindra

This comment has been minimized.

Copy link

commented Apr 26, 2016

What language is this? coffee?

@elbotho

This comment has been minimized.

Copy link

commented Jun 13, 2016

👍

@nini

This comment has been minimized.

Copy link

commented Mar 24, 2017

Any chance to get working jsfiddle link for this?

@myztajay

This comment has been minimized.

Copy link

commented Oct 4, 2017

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

@Eightyplus

This comment has been minimized.

Copy link

commented Jun 15, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.