Why React.js doesn't work with Twitter's TypeAhead library
I am using react for my application and I noticed that the Twitter TypeAhead library is not working when I try to use Inside React components. I know there are many other autocomplete libraries out there, but I wondered why it doesn't work with the Twitter type when react is known to work well with jQuery and a few other libraries.
Updated:
I used the fb avatar example code as an example 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 runs outside of the component works, but not the same box that appears in the react component. My original problem is very similar to this and so I used this example
+3
source to share
3 answers
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>
+4
source to share
Using jQuery in a React JS application is usually not required. In general, the more common jQuery-dependent library alternative is more common.
Googling for "Bloodhound react js" allows me https://github.com/erikschlegel/React-Twitter-Typeahead which is react js suitable and doesn't require JQuery.
0
source to share
An updated answer (for the latest React) might look like this: https://gist.github.com/rjurney/70725bac99df3684faa150198c9a0a23
I cannot get the correct embed code.
0
source to share