Why Twitter Typeahead doesn't work with React js?
I am currently using Twitter Typeahead in my React Project and I would like to display suggestions based on Typeahead, but I cannot get it to work.
Below is my code:
var Search = React.createClass({
getInitialState: function () {
return {query: ''};
},
handleChange: function (e) {
this.setState({query: e.target.value});
},
componentDidMount(){
var suggestions = {
query: "d",
results: [
{name: "first"},
{name: "second"},
{name: "third"},
{name: "fourth"}
]
};
var suggests = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
local: suggestions
});
var template = _.template('<span class="name"><%= name %></span>');
$(React.findDOMNode(this.refs.suggestion)).typeahead({
hint: true,
highlight: true,
},
{
name: 'suggests',
displayKey: 'name',
source: suggests.ttAdapter(),
templates: {
suggestion: function (data) {
return template(data);
}
}
});
},
render() {
<form action="myAction" method="GET">
<input name="q" id="query" ref="suggestion" className="form-control suggestions" type="text"
value={this.state.query}
onChange={this.handleChange} onBlur={this.handleChange}/>
</form>
}
});
Based on my code, what do I need to add or change to be able to get autocomplete and suggestions working on my project. Thanks so much for your valuable advice and help.
+3
source to share
1 answer
Lacks
- Initialize the bloodhound
- No render method return
- The distorted local version must accept offers. Results, not just suggestions
var Search = React.createClass({
getInitialState: function() {
return {
query: ''
};
},
handleChange: function(e) {
this.setState({
query: e.target.value
});
},
componentDidMount: function() {
var suggestions = {
query: "d",
results: [{
name: "first"
}, {
name: "second"
}, {
name: "third"
}, {
name: "fourth"
}]
};
var suggests = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
local: suggestions.results
});
suggests.initialize(); // <----- THIS ONE
var template = _.template('<span class="name"><%= name %></span>');
$(React.findDOMNode(this.refs.suggestion)).typeahead({
hint: true,
highlight: true,
}, {
name: 'suggests',
displayKey: 'name',
source: suggests.ttAdapter(),
templates: {
suggestion: function(data) {
return template(data);
}
}
});
},
render: function() { // <---- MISSING A RETURN HERE
return (<form action="myAction" method="GET">
<input name="q" id="query" ref="suggestion" className="form-control suggestions" type="text"
value={this.state.query}
onChange={this.handleChange} onBlur={this.handleChange}/>
</form>);
}
});
Here is a demo http://jsbin.com/vubehe/edit?html,output
+7
source to share