docs: Add Autocompletion Demo to Examples

examples/autocomplete/components/result_action.jsx

@@ -0,0 +1,21 @@
+import EX from 'reactalikeSource';
+
+class ResultAction extends EX.Component {
+  render() {
+    let {word, img_src, imdb} = this.props.ex_data
+    return (
+      <div class="action-list-item">
+        <div class="col-xs-4">
+        <img src={img_src} height="50" />
+        </div>
+        <div class="col-xs-8">
+       <b>{word}</b>
+        <p><a href={imdb}>IMDB Link</a></p>
+        </div>
+      </div>
+
+      )
+
+  }
+}
+export default ResultAction

examples/autocomplete/containers/layout.jsx

@@ -1,6 +1,7 @@
 import EX from 'reactalikeSource';
 import BuildTrie from 'action-autocomplete';
 import ListItem from 'component/list_item'
+import ResultAction from 'component/result_action';
 import AppState from '../state/appstate'
 const WordList  = require('src/word_list');
 const WordActions = require('src/word_actions');
@@ -31,8 +32,11 @@ const Layout = {
     } = Layout.state;
 
     let movieSuggestions = suggestions.map((itm) => {
-      let data = {suggestion: itm, typed: typed, clickAction: logAction(itm)}
-      return <ListItem ex_data={data}/>
+      if (typeof itm === 'string') {
+        let data = {suggestion: itm, typed: typed, clickAction: logAction(itm)}
+        return <ListItem ex_data={data}/>
+      }
+      return <ResultAction ex_data={itm}/>
     })
     return (
     	<div class="row">

examples/autocomplete/dist/demo.css

@@ -2,11 +2,11 @@
     margin-top:20%; /* Don't copy this */
 }
 .stylish-input-group .input-group-addon{
-    background: white !important; 
+    background: white !important;
 }
 .stylish-input-group .form-control{
-	border-right:0; 
-	box-shadow:0 0 0; 
+	border-right:0;
+	box-shadow:0 0 0;
 	border-color:#ccc;
 }
 .stylish-input-group button{
@@ -28,4 +28,9 @@
 .has-action {
 	color: #1E90FF;
 	cursor: pointer;
-}
+}
+.action-list-item {
+	height: 60px;
+	padding:5px;
+	background: rgba(0, 191, 255, 0.5);
+}

examples/autocomplete/main.js

@@ -1,5 +1,5 @@
 import EX from 'reactalikeSource';
-import Layout from './containers/layout'
+import Layout from 'container/layout'
 
 EX.mountAppToNode(
   Layout , document.getElementById('root'));

examples/autocomplete/src/word_actions.js

@@ -1,90 +1,97 @@
 module.exports = {
    "Weird Science":{
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BNTE2MzkxNzExM15BMl5BanBnXkFtZTgwNzIwODQxMTE@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Weird Science',
+      img_src: 'http://i.imgur.com/8U9iw9W.jpg',
       imdb: 'http://www.imdb.com/title/tt0090305'
    },
    "Raiders of the Lost Ark":{
+      word: 'Raiders of the Lost Ark',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjA0ODEzMTc1Nl5BMl5BanBnXkFtZTcwODM2MjAxNA@@._V1_SY1000_CR0,0,664,1000_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0082971'
    },
    "Indiana Jones and the Temple of Doom":{
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BMTMyNzI4OTA5OV5BMl5BanBnXkFtZTcwMDQ2MjAxNA@@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Indiana Jones and the Temple of Doom',
+      img_src: 'http://imgur.com/56UIDV4.jpg',
       imdb: 'http://www.imdb.com/title/tt0087469'
    },
    "The Terminator": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
-      imdb: 'http://www.imdb.com/title/tt0087363'
-   },
-   "Who Framed Roger Rabbit": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'The Terminator',
+      img_src: 'http://imgur.com/DHf55pG.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Bill & Ted's Excellent Adventure": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Bill & Ted\'s Excellent Adventure',
+      img_src: 'http://imgur.com/LIvTcVW.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Ghostbusters": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Ghostbusters',
+      img_src: 'http://imgur.com/lWH1FVN.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Ghostbusters II": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Ghostbusters II',
+      img_src: 'https://s-media-cache-ak0.pinimg.com/736x/04/1e/ed/041eedf9189f8c7d292788abfcb8e3ff.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Gremlins": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Gremlins',
+      img_src: 'http://imgur.com/5EpAbN0.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Adventures in Babysitting": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Adventures in Babysitting',
+      img_src: 'http://imgur.com/sEvnd9N.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Beetlejuice": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
+      word: 'Beetlejuice',
+      img_src: 'http://imgur.com/O6y5FRK.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "The Karate Kid":  {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
-      imdb: 'http://www.imdb.com/title/tt0087363'
-   },
-   "The Karate Kid Part II":  {
+      word: 'The Karate Kid',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Weekend at Bernie's": {
-      img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
-      imdb: 'http://www.imdb.com/title/tt0087363'
-   },
-   "The Untouchables":  {
+      word: 'Weekend at Bernie\'s',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Die Hard":  {
+      word: 'Die Hard',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "A Christmas Story":  {
+      word: 'A Christmas Story',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Ferris Bueller's Day Off":  {
+      word: 'Ferris Bueller\'s Day Off',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Akira":  {
+      word: 'Akira',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BM2ZiZTk1ODgtMTZkNS00NTYxLWIxZTUtNWExZGYwZTRjODViXkEyXkFqcGdeQXVyMTE2MzA3MDM@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0094625'
    },
    "Aliens":  {
+      word: 'Aliens',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BNGYxMTA0M2EtYjg0Yy00NzI5LTg4NjEtZDA2MTcyOWM0YTVjL2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0090605'
    },
    "Robocop":  {
+      word: 'Robocop',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BZDVjN2FkYTQtNTBlOC00MjM5LTgzMWEtZWRlNGUyYmNiOTFiXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0087363'
    },
    "Revenge of the Nerds":  {
+      word: 'Revenge of the Nerds',
       img_src: 'https://images-na.ssl-images-amazon.com/images/M/MV5BODU1NzM4NTA4Nl5BMl5BanBnXkFtZTgwMTkxMzcxMTE@._V1_UX182_CR0,0,182,268_AL_.jpg',
       imdb: 'http://www.imdb.com/title/tt0088000'
    }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactalike",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "\"React-like library I made\"",
   "main": "index.js",
   "scripts": {
@@ -20,14 +20,14 @@
   },
   "homepage": "https://github.com/MKwenhua/reactalike#readme",
   "dependencies": {
-    "action-autocomplete": "^1.0.0",
     "babel": "^6.5.2",
     "babel-core": "^6.17.0",
     "babel-loader": "^6.3.2",
     "babel-preset-es2015": "^6.16.0"
   },
   "devDependencies": {
     "babel-plugin-transform-react-jsx": "^6.23.0",
-    "sort-by": "^1.1.1"
+    "sort-by": "^1.1.1",
+    "action-autocomplete": "1.1.1"
   }
 }

webpack.autocomplete-example.config.js

@@ -2,36 +2,42 @@ const debug = false;
 const path = require('path');
 
 module.exports = {
-  devtool: debug ? "inline-sourcemap" : false,
-  entry:  './examples/autocomplete/main.js',
-  resolve: {
-   extensions: ['.js', '.jsx'],
-   alias: {
-     reactalikeSource: path.resolve( __dirname, 'index.js'),
-     component: path.resolve( __dirname, 'examples/autocomplete/components'),
-     container: path.resolve( __dirname, 'examples/autocomplete/containers'),
-     src: path.resolve( __dirname, 'examples/autocomplete/src'),
-     redux: path.resolve( __dirname, 'examples/simple/node_modules/redux')
-   }
- },
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'babel-loader',
-        query: {
-      presets: ['es2015', 'stage-0'],
-      plugins: [
-        ['transform-react-jsx', {
-          'pragma': 'EX.node'
-        }]
-      ]
-    },
+   devtool: debug ? "inline-sourcemap" : false,
+   entry: './examples/autocomplete/main.js',
+   resolve: {
+      extensions: [
+         '.js', '.jsx'
+      ],
+      alias: {
+         reactalikeSource: path.resolve(__dirname, 'index.js'),
+         component: path.resolve(__dirname, 'examples/autocomplete/components'),
+         container: path.resolve(__dirname, 'examples/autocomplete/containers'),
+         src: path.resolve(__dirname, 'examples/autocomplete/src'),
+         redux: path.resolve(__dirname, 'examples/simple/node_modules/redux')
       }
-    ]
-  },
-  output: {
-    filename: "./examples/autocomplete/dist/bundle.js"
-  }
+   },
+   module: {
+      loaders: [
+         {
+            test: /\.jsx?$/,
+            exclude: /(node_modules|bower_components)/,
+            loader: 'babel-loader',
+            query: {
+               presets: [
+                  'es2015', 'stage-0'
+               ],
+               plugins: [
+                  [
+                     'transform-react-jsx', {
+                        'pragma': 'EX.node'
+                     }
+                  ]
+               ]
+            }
+         }
+      ]
+   },
+   output: {
+      filename: "./examples/autocomplete/dist/bundle.js"
+   }
 };