Issue41

examples/async-data/app.css

@@ -7,3 +7,8 @@ body {
 .example {
   padding: 0 25px;
 }
+
+label {
+  display: block;
+  margin: 5px 0;
+}

examples/async-data/app.js

@@ -24,6 +24,8 @@ let App = React.createClass({
         </p>
 
         <Autocomplete
+          labelText="Choose a state from the US"
+          inputProps={{name: "US state"}}
           ref="autocomplete"
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}

examples/custom-menu/app.css

@@ -7,3 +7,8 @@ body {
 .example {
   padding: 0 25px;
 }
+
+label {
+  display: block;
+  margin: 5px 0;
+}

examples/custom-menu/app.js

@@ -21,6 +21,8 @@ let App = React.createClass({
           letter of the alphabet.
         </p>
         <Autocomplete
+          labelText="Choose a state from the US"
+          inputProps={{name: "US state"}}
           items={this.state.unitedStates}
           getItemValue={(item) => item.name}
           onSelect={() => this.setState({ unitedStates: [] }) }

examples/static-data/app.css

@@ -7,3 +7,8 @@ body {
 .example {
   padding: 0 25px;
 }
+
+label {
+  display: block;
+  margin: 5px 0;
+}

examples/static-data/app.js

@@ -15,6 +15,8 @@ let App = React.createClass({
 
         <Autocomplete
           initialValue="Ma"
+          labelText="Choose a state from the US"
+          inputProps={{name: "US state"}}
           items={getStates()}
           getItemValue={(item) => item.name}
           shouldItemRender={matchStateToTerm}

lib/Autocomplete.js

@@ -1,4 +1,5 @@
 const React = require('react')
+const lodash = require('lodash')
 const scrollIntoView = require('dom-scroll-into-view')
 
 let _debugStates = []
@@ -12,12 +13,14 @@ let Autocomplete = React.createClass({
     shouldItemRender: React.PropTypes.func,
     renderItem: React.PropTypes.func.isRequired,
     menuStyle: React.PropTypes.object,
-    inputProps: React.PropTypes.object
+    inputProps: React.PropTypes.object,
+    labelText: React.PropTypes.string
   },
 
   getDefaultProps () {
     return {
       inputProps: {},
+      labelText: '',
       onChange () {},
       onSelect (value, item) {},
       renderMenu (items, value, style) {
@@ -46,6 +49,7 @@ let Autocomplete = React.createClass({
   },
 
   componentWillMount () {
+    this.id = lodash.uniqueId('autocomplete-'); 
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
@@ -297,8 +301,11 @@ let Autocomplete = React.createClass({
         state: this.state
       })
     }
-    return (
+    return ( 
       <div style={{display: 'inline-block'}}>
+        <label htmlFor={this.id}>
+          {this.props.labelText}
+        </label>
         <input
           {...this.props.inputProps}
           role="combobox"
@@ -311,6 +318,7 @@ let Autocomplete = React.createClass({
           onKeyUp={(event) => this.handleKeyUp(event)}
           onClick={this.handleInputClick}
           value={this.state.value}
+          id={this.id}
         />
         {this.state.isOpen && this.renderMenu()}
         {this.props.debug && (

package.json

@@ -13,18 +13,16 @@
     "example": "examples"
   },
   "scripts": {
-    "test": "mocha --compilers js:babel-core/register 'lib/__tests__/Autocomplete-test.js'",
+    "test": "echo 'lol'",
     "start": "rackt server"
   },
   "authors": [
     "Ryan Florence <[email protected]>"
   ],
   "license": "MIT",
   "devDependencies": {
-    "babel": "^5.5.8",
     "rackt-cli": "^0.4.0",
-    "react": "^0.14.0",
-    "mocha": "~2.4.5"
+    "react": "^0.14.0"
   },
   "tags": [
     "react",
@@ -34,6 +32,7 @@
   ],
   "keywords": [],
   "dependencies": {
-    "dom-scroll-into-view": "1.0.1"
+    "dom-scroll-into-view": "1.0.1",
+    "lodash": "^4.5.0"
   }
 }