实时搜索未在 bootstrap-select 中初始化

Question

我使用 React.js 并且想使用 bootstrap-select with live search 功能，但是 bootstrap-select 初始化时没有实时搜索功能。

var SelectPicker = React.createClass({

  getInitialState: function () {
    return {
      value: optionItems[0]
    }
  },

  _onChange: function(){
    console.log('change');
  },

  render: function() {

  var options = this.props.items.map((object, i) =>
    <option key={i} value={object}>
    {object}
    </option>
  );

    return (
      <div className="selectWrapper">
      <label htmlFor={"selectNum"}>Number</label>
      <select id={"selectNum"}
      ref="selectPicker"
      className="form-control selectPicker"
      data-live-search="true"
      onChange={this._onChange}
      value={this.state.value}>
      {options}
      </select>
      </div>
    );
  }
});

var optionItems = ['1', '2', '3', '4', '5', '6'];

ReactDOM.render(
  <SelectPicker items={optionItems} />,
  document.getElementById('container')
);

如果我初始化 select-picker without react 它工作正常。

Answer 1

您需要初始化 selectpicker，您可以在 componentDidMount 中像这样

componentDidMount: function () {
  $(this.refs.selectPicker).selectpicker({
    liveSearch: true
  });
},

Example

实时搜索未在 bootstrap-select 中初始化

Live search is not initialized in bootstrap-select

javascript

twitter-bootstrap

reactjs

bootstrap-select