Why Twitter Typeahead doesn't work with React js?

Question

I'm currently using Twitter Typeahead in my React Project and i would like to display suggestions based on Typeahead but i can't manage to make it work.

Below 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 autocompletion & suggestions working on my project. Thanks a lot for your valuable advice & help.

Answer 1

The following are missing

1. Initialize bloodhound
2. Render method is missing a return
3. bloodhound local option should take suggestions.results and 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