diff --git a/spikes/fuzzy-search/react-select/src/root.js b/spikes/fuzzy-search/react-select/src/root.js
index db47983b..c4cf6ebb 100644
--- a/spikes/fuzzy-search/react-select/src/root.js
+++ b/spikes/fuzzy-search/react-select/src/root.js
@@ -2,6 +2,8 @@ const ReactRedux = require('react-redux');
const ReactHotLoader = require('react-hot-loader');
const React = require('react');
const Search = require('./search');
+const SearchAsync = require('./search-async')
+
const {
AppContainer
} = ReactHotLoader;
@@ -15,7 +17,11 @@ module.exports = ({
}) => {
return (
-
+
+
+
+
+
);
};
diff --git a/spikes/fuzzy-search/react-select/src/search-async.js b/spikes/fuzzy-search/react-select/src/search-async.js
new file mode 100644
index 00000000..c8f9ace5
--- /dev/null
+++ b/spikes/fuzzy-search/react-select/src/search-async.js
@@ -0,0 +1,61 @@
+const React = require('react');
+const Select = require('react-select');
+const {
+ Async
+} = Select
+
+const SelectAsync = Async
+
+
+const SearchAsync = React.createClass({
+
+ getInitialState: function() {
+ return {
+ selectValue: ''
+ }
+ },
+
+ updateValue: function(newValue) {
+ console.log('State changed to ' + newValue);
+ this.setState({
+ selectValue: newValue
+ });
+ },
+
+ render: function () {
+
+ const options = function(input, callback) {
+ setTimeout(function() {
+ callback(null, {
+ options: [
+ { value: 'one', label: 'One' },
+ { value: 'two', label: 'Two' },
+ { value: 'three', label: 'Three' },
+ { value: 'four', label: 'Four' },
+ { value: 'five', label: 'Five' },
+ { value: 'six', label: 'Six' },
+ ],
+ // CAREFUL! Only set this to true when there are no more options,
+ // or more specific queries will not be sent to the server.
+ complete: true
+ }, 1000);
+ });
+ }
+
+ return (
+
+
Async Search
+
+
+ )
+ }
+})
+
+module.exports = SearchAsync
\ No newline at end of file
diff --git a/spikes/fuzzy-search/react-select/src/search-single.js b/spikes/fuzzy-search/react-select/src/search-single.js
deleted file mode 100644
index 874e38d6..00000000
--- a/spikes/fuzzy-search/react-select/src/search-single.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const React = require('react');
-const Select = require('react-select');
-
-
-const SearchSingle = React.createClass({
-
- getInitialState: function() {
- return {
- selectValue: ''
- }
- },
-
- updateValue: function(newValue) {
- console.log('State changed to ' + newValue);
- this.setState({
- selectValue: newValue
- });
- },
-
- render: function () {
-
- var options = [
- { value: 'one', label: 'One' },
- { value: 'two', label: 'Two' },
- { value: 'three', label: 'Three' },
- { value: 'four', label: 'Four' },
- { value: 'five', label: 'Five' },
- { value: 'six', label: 'Six' },
- ];
-
- return (
-
-
Single Search
-
-
- )
- }
-})
-
-module.exports = SearchSingle
\ No newline at end of file
diff --git a/spikes/fuzzy-search/react-select/src/search.js b/spikes/fuzzy-search/react-select/src/search.js
index adbae15e..2ef454bf 100644
--- a/spikes/fuzzy-search/react-select/src/search.js
+++ b/spikes/fuzzy-search/react-select/src/search.js
@@ -1,14 +1,48 @@
const React = require('react');
-const SearchSingle = require('./search-single');
+const Select = require('react-select');
-const Search = () => {
+const Search = React.createClass({
- return (
-
-
-
- )
-}
+ getInitialState: function() {
+ return {
+ selectValue: ''
+ }
+ },
+
+ updateValue: function(newValue) {
+ console.log('State changed to ' + newValue);
+ this.setState({
+ selectValue: newValue
+ });
+ },
+
+ render: function () {
+
+ var options = [
+ { value: 'one', label: 'One' },
+ { value: 'two', label: 'Two' },
+ { value: 'three', label: 'Three' },
+ { value: 'four', label: 'Four' },
+ { value: 'five', label: 'Five' },
+ { value: 'six', label: 'Six' },
+ ];
+
+ return (
+
+
{this.props.multi ? 'Multi' : 'Single'} Search
+
+
+ )
+ }
+})
module.exports = Search
\ No newline at end of file