Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
<meta name="description" content="Combobox custom filterFunc" />
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
        <title>reactjs combobox</title>
        <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/kbakba/reactjs-combobox/v0.0.1-static/dist/css/page.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/kbakba/reactjs-combobox/v0.0.1-static/dist/css/Combobox.css">
    </head>
    <body>
        <p>Try 1, 2, 3, 4, 5</p>
        <div id="insert_here"></div>
​
        <script src="//fb.me/react-with-addons-0.10.0.js"></script>
        <script src="http://cdn.rawgit.com/kbakba/reactjs-combobox/v0.0.1-static/dist/js/Combobox.js" type="text/javascript" charset="utf-8"></script>
        </script>
    </body>
</html>
 
var data = [
    { label: "One",      value: "1" },
    { label: "Two",      value: "2" },
    { label: "Point",    value: "0" },
    { label: "Triangle", value: "3" },
    { label: "Square", value: "4" },
    { label: "Star",   value: "5" },
    { label: "Super Star",   value: "Michael Jackson" },
    { label: "Point1",    value: "0" },
    { label: "Triangle1", value: "3" },
    { label: "Square1", value: "4" },
    { label: "Star1",   value: "5" },
    { label: "Point2",    value: "0" },
    { label: "Triangle2", value: "3" },
    { label: "Square2", value: "4" },
    { label: "Star2",   value: "5" },
    { label: "Point3",    value: "0" },
    { label: "Triangle3", value: "3" },
    { label: "Square3", value: "4" },
    { label: "Star3",   value: "5" }
];
var comboboxInstance;
var log = function(newValue, oldValue) {
    console.log(comboboxInstance.value());
};
var myFilter = function(textValue, item) {
    return (textValue == item.value);
};
​
comboboxInstance = React.renderComponent(
  NS.Combobox({data: data, defaultValue: "3", 
               onChange: log, filterFunc: myFilter}),
    document.getElementById('insert_here')
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x