[Docs] Update Documentation for Auto Complete

docs/src/app/app-routes.jsx

@@ -20,7 +20,7 @@ import Themes from './components/pages/customization/themes';
 import InlineStyles from './components/pages/customization/inline-styles';
 
 import AppBarPage from './components/pages/components/AppBar/Page';
-import AutoComplete from './components/pages/components/auto-complete';
+import AutoCompletePage from './components/pages/components/AutoComplete/Page';
 import AvatarPage from './components/pages/components/Avatar/Page';
 import BadgePage from './components/pages/components/Badge/Page';
 import Buttons from './components/pages/components/buttons';
@@ -83,7 +83,7 @@ const AppRoutes = (
     <Redirect from="components" to="/components/app-bar" />
     <Route path="components">
       <Route path="app-bar" component={AppBarPage} />
-      <Route path="auto-complete" component={AutoComplete} />
+      <Route path="auto-complete" component={AutoCompletePage} />
       <Route path="avatar" component={AvatarPage} />
       <Route path="badge" component={BadgePage} />
       <Route path="buttons" component={Buttons} />

docs/src/app/components/pages/components/AutoComplete/ExampleFilters.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import AutoComplete from 'material-ui/lib/auto-complete';
+
+const fruit = [
+  'Apple',
+  'Apricot',
+  'Avocado',
+  'Banana',
+  'Bilberry',
+  'Blackberry',
+  'Blackcurrant',
+  'Blueberry',
+  'Boysenberry',
+  'Cantaloupe',
+  'Currant',
+  'Cherry',
+  'Cherimoya',
+  'Cloudberry',
+  'Coconut',
+  'Cranberry',
+  'Damson',
+  'Date',
+  'Dragonfruit',
+  'Durian',
+  'Elderberry',
+  'Feijoa',
+  'Fig',
+  'Goji berry',
+  'Gooseberry',
+  'Grape',
+  'Raisin',
+  'Grapefruit',
+  'Guava',
+  'Huckleberry',
+  'Jabouticaba',
+  'Jackfruit',
+  'Jambul',
+  'Jujube',
+  'Juniper berry',
+  'Kiwi fruit',
+  'Kumquat',
+  'Lemon',
+  'Lime',
+  'Loquat',
+  'Lychee',
+  'Mango',
+  'Marion berry',
+  'Melon',
+  'Cantaloupe',
+  'Honeydew',
+  'Watermelon',
+  'Miracle fruit',
+  'Mulberry',
+  'Nectarine',
+  'Olive',
+  'Orange',
+  'Blood Orange',
+  'Clementine',
+  'Mandarine',
+  'Tangerine',
+  'Papaya',
+  'Passionfruit',
+  'Peach',
+  'Pear',
+  'Persimmon',
+  'Physalis',
+  'Plum',
+  'Pineapple',
+  'Pumpkin',
+  'Pomegranate',
+  'Pomelo',
+  'Purple Mangosteen',
+  'Quince',
+  'Raspberry',
+  'Salmonberry',
+  'Rambutan',
+  'Redcurrant',
+  'Salal berry',
+  'Satsuma',
+  'Star fruit',
+  'Strawberry',
+  'Squash',
+  'Tamarillo',
+  'Tamarind',
+  'Tomato',
+  'Ugli fruit',
+];
+
+const colors = [
+  'Red',
+  'Orange',
+  'Yellow',
+  'Green',
+  'Blue',
+  'Purple',
+  'Black',
+  'White',
+];
+
+const AutoCompleteExampleFilters = () => (
+  <div>
+    <AutoComplete
+      floatingLabelText="fuzzy search"
+      filter={AutoComplete.fuzzyFilter}
+      dataSource={fruit}
+    />
+    <br/>
+    <AutoComplete
+      floatingLabelText="case insensitive, colors"
+      filter={AutoComplete.caseInsensitiveFilter}
+      dataSource={colors}
+    />
+  </div>
+);
+
+export default AutoCompleteExampleFilters;

docs/src/app/components/pages/components/AutoComplete/ExampleNoFilter.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import AutoComplete from 'material-ui/lib/auto-complete';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const dataSource = [
+  {
+    text: 'text-value1',
+    value: (
+      <MenuItem
+        primaryText="text-value1"
+        secondaryText="&#9786;"
+      />
+    ),
+  },
+  {
+    text: 'text-value2',
+    value: (
+      <MenuItem
+        primaryText="text-value2"
+        secondaryText="&#9786;"
+      />
+    ),
+  },
+];
+
+export default class AutoCompleteExampleNoFilter extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      input1: [],
+      input2: [],
+      input3: [],
+    };
+  }
+
+  handleNewRequest = (t) => {
+    console.log(`New request: ${t}`);
+  };
+
+  render() {
+    return (
+      <div>
+        <AutoComplete
+          hintText="text-value data"
+          filter={AutoComplete.noFilter}
+          dataSource={dataSource}
+          onNewRequest={this.handleNewRequest}
+        /><br/>
+        <AutoComplete
+          floatingLabelText="showAllItems"
+          filter={AutoComplete.noFilter}
+          triggerUpdateOnFocus={true}
+          animated={false}
+          dataSource={['12345', '23456', '34567']}
+        />
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/AutoComplete/ExampleSimple.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import AutoComplete from 'material-ui/lib/auto-complete';
+
+export default class AutoCompleteExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      input1: [],
+      input2: [],
+    };
+  }
+
+  handleNewRequest = (t) => {
+    console.log(`New request: ${t}`);
+  };
+
+  handleUpdateInput1 = (t) => {
+    this.setState({
+      input1: [t, t + t, t + t + t],
+    });
+  };
+
+  handleUpdateInput2 = (t) => {
+    this.setState({
+      input2: [t, t + t, t + t + t],
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <AutoComplete
+          dataSource={this.state.input1}
+          onUpdateInput={this.handleUpdateInput1}
+          onNewRequest={this.handleNewRequest}
+        />
+        <br/>
+        <AutoComplete
+          hintText="Hint Text"
+          dataSource={this.state.input2}
+          onUpdateInput={this.handleUpdateInput2}
+          onNewRequest={this.handleNewRequest}
+        />
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/AutoComplete/Page.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import autoCompleteReadmeText from './README';
+import autoCompleteCode from '!raw!material-ui/lib/auto-complete';
+import AutoCompleteExampleSimple from './ExampleSimple';
+import autoCompleteExampleSimpleCode from '!raw!./ExampleSimple';
+import AutoCompleteExampleNoFilter from './ExampleNoFilter';
+import autoCompleteExampleNoFilterCode from '!raw!./ExampleNoFilter';
+import AutoCompleteExampleFilters from './ExampleFilters';
+import autoCompleteExampleFiltersCode from '!raw!./ExampleFilters';
+
+const AutoCompletesPage = () => (
+  <div>
+    <MarkdownElement text={autoCompleteReadmeText} />
+    <CodeExample code={autoCompleteExampleSimpleCode}>
+      <AutoCompleteExampleSimple />
+    </CodeExample>
+    <CodeExample code={autoCompleteExampleNoFilterCode}>
+      <AutoCompleteExampleNoFilter />
+    </CodeExample>
+    <CodeExample code={autoCompleteExampleFiltersCode}>
+      <AutoCompleteExampleFilters />
+    </CodeExample>
+    <PropTypeDescription code={autoCompleteCode} />
+  </div>
+);
+
+export default AutoCompletesPage;

docs/src/app/components/pages/components/AutoComplete/README.md

@@ -0,0 +1,6 @@
+## Auto Complete
+The [auto-complete](https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field)
+is an extension of a regular text-field that will auto-complete the input dynamically. It can take different auto-complete filters and
+uses a menu to display suggestions.
+
+### Examples