Menu
I'm using react for my application and i've noticed the Twitter Typeahead library doesn't work when I try to use inside React components. I know there are plenty of other react autocomplete libraries out there but I was wondering why it doesn't work with Twitter's typeahead when react is known to work well with jQuery and multiple other libraries
Updated:
As an example I used the fb avatar example code and tried to use typeahead.
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
</head>
<body>
<div id="example"></div>
<div>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="States of US"/>
</div>
</div>
</body>
<script type="text/jsx">
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
// constructs the suggestion engine
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: states
});
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: states
});
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
<div id="bloodhound">
<div><input className="typeahead" type="text" placeholder="States of US"/></div>
</div>
</div>
);
}
});
var ProfilePic = React.createClass({
render: function() {
return (
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
});
var ProfileLink = React.createClass({
render: function() {
return (
<a href={'https://www.facebook.com/' + this.props.username}>
{this.props.username}
</a>
);
}
});
React.render(
<Avatar username="sports" />,
document.getElementById('example')
);
</script>
</html>
The box that does is outside of the component works but not the same box when rendered within a react component. My original problem is very similar to this and hence I have used this example
409
Please see this updated answer
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.io/typeahead.js/css/examples.css">
</head>
<body>
<div id="example"></div>
<div>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="States of US"/>
</div>
</div>
</body>
<script type="text/jsx">
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
// constructs the suggestion engine
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: states
});
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: states
});
var Avatar = React.createClass({
handleChange: function(e) {
console.log(e.target.value);
},
componentDidMount: function() {
React.findDOMNode(this.refs.myTextInput).focus();
$ (React.findDOMNode(this.refs.myTextInput)).typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: states
});
},
render: function() {
console.log('resd');
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
<div id="bloodhound">
<div>
<input className="typeahead" type="text" placeholder="States of US" ref="myTextInput" name="sahan" onChange={this.handleChange} onBlur={this.handleChange} /></div>
</div>
</div>
);
}
});
var ProfilePic = React.createClass({
render: function() {
return (
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
});
var ProfileLink = React.createClass({
render: function() {
return (
<a href={'https://www.facebook.com/' + this.props.username}>
{this.props.username}
</a>
);
}
});
React.render(
<Avatar username="sports" />,
document.getElementById('example')
);
</script>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
