Created
December 6, 2014 23:34
-
-
Save andyl/b3e5ca4d87ad6ad1728d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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] |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
👍