React-combo-box with bootstrap examples

<!DOCTYPE html>
<html>

  <head>
    <!--Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <link type="text/css" rel="stylesheet" href="https://rawgit.com/huston007/react-combo-box/master/dist/css/combobox.css">
    <link rel="stylesheet" href="style.css">
    
    <script src='http://fb.me/react-with-addons-0.11.2.js'></script>
    <script src='https://rawgit.com/huston007/react-combo-box/master/dist/js/combobox.js'></script>
  
    <!--only for demo purposes, not required for combobox-->
    <script src='https://rawgit.com/kriskowal/q/v1/q.js'></script>
    
    <script src="script.js"></script>
    
  </head>

  <body>
  
    Default using:
    <div id="default" class="combobox-container"></div>
    
    Can be disabled as well: <a href="javascript:void(0)" id="disableToggler">toggle</a>
    <div id="disableable" class="combobox-container"></div>
    
    You can provide custom dropdown items:
    <div id="customItem" class="combobox-container"></div>
    
    You can provide your own datasource with promise interface
    <div id="promiseSource" class="combobox-container"></div>
  
    Or even just callback-styled datasource:
    <div id="callbackSource" class="combobox-container"></div>
    
    Array of objects can be a source too:
    <div id="objectsArray" class="combobox-container"></div>
    
    It's easy to customize.
    <div id="cusomizedInput" class="combobox-container"></div>
  </body>

</html>


(function(document){
    "use strict";

    var stringOptions = ["one", "two", "three", "four", "five", "seven", 
      "eight", "nine", "ten"];

    document.addEventListener("DOMContentLoaded", function() {

        React.renderComponent(
            ReactComboBox({options: stringOptions, defaultValue:"en"}),
            document.getElementById('default')
        );
        
        //disable input example
        var disabled = true;
        
        var disableableComboBox = React.renderComponent(
            ReactComboBox({options: stringOptions, defaultValue:"n", disabled: disabled}),
            document.getElementById('disableable')
        );
        
        document.getElementById('disableToggler').addEventListener('click', function(){
          disabled = !disabled;
          disableableComboBox.setProps({disabled: disabled});
        });
  
        //you can provide you own item combonent
        var MyCustomItem = React.createClass({displayName: 'MyCustomItem',
            render: function () {
                return (
                    React.DOM.div({className: "myBest"},
                        React.DOM.b(null, this.props.item)
                    )
                );
            }
        });

        React.renderComponent(
            ReactComboBox({options: stringOptions}, MyCustomItem(null)),
            document.getElementById('customItem')
        );
        
        //you can use promises as data source
        
        var dataSource = function(query){
          var defer = Q.defer();
          
          //use query to custom or serverside search
          setTimeout(function(){
            defer.resolve(stringOptions);
          }, 500);
          
          return defer.promise;
        }
        
        React.renderComponent(
            ReactComboBox({source: dataSource}),
            document.getElementById('promiseSource')
        );
        
        //or even oldstyle callback
        
        var dataSource = function(query, callback){
          setTimeout(function(){
            callback(stringOptions);
          }, 500);
        }
        
        React.renderComponent(
            ReactComboBox({source: dataSource}),
            document.getElementById('callbackSource')
        );
        
        //objects array as options
        var optionsArray = [
          {id: 1, name: "one"},
          {id: 2, name: "two"},
          {id: 3, name: "three"}
        ];

        React.renderComponent(
            ReactComboBox({options: optionsArray, titleField: "name"}),
            document.getElementById('objectsArray')
        );

        //customize input
        React.renderComponent(
            ReactComboBox({options: stringOptions, customInputClass:"form-control"}),
            document.getElementById('cusomizedInput')
        );
    });

})(window.document);

body{
  margin: 20px;
}

input{
  height: 2.3em;
}

.combobox-container{
  width: 200px;
  margin-top:2px;
  margin-bottom: 10px;
}

.big-input{
  height: 40px;
  border: solid 1px silver;
  border-radius: 8px;
}

Examples for https://github.com/huston007/react-combo-box component