为什么 Twitter Typeahead 不适用于 React js？答案

【问题标题】：Why Twitter Typeahead doesn't work with React js?为什么 Twitter Typeahead 不适用于 React js？
【发布时间】：2023-04-05 10:59:01
【问题描述】：

我目前在我的 React 项目中使用 Twitter Typeahead，我想显示基于 Typeahead 的建议，但我无法让它发挥作用。

在我的代码下面：

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>
    }

});

根据我的代码，我需要添加或更改哪些内容才能在我的项目中获得自动完成和建议。非常感谢您的宝贵建议和帮助。

【问题讨论】：

标签： javascript reactjs typeahead.js fluxible

【解决方案1】：

缺少以下内容

初始化寻血猎犬
渲染方法缺少返回
bloodhound 本地选项应该采用建议。结果而不仅仅是建议

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>);
  }

});

这是一个演示http://jsbin.com/vubehe/edit?html,output

【讨论】：