Live search is not initialized in bootstrap-select

Question

I use React.js and would like to use bootstrap-select with live search feature, but bootstrap-select is initialized without live-search feauture.

jsfiddle

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

If I initialize select-picker without react it works ok.

Answer 1

You need initialize selectpicker, you can do it in componentDidMount like this

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

Example