Introduce AutocompelteInput for source editing

package.json

@@ -35,6 +35,7 @@
     "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
+    "react-autocomplete": "^1.4.0",
     "react-codemirror": "^0.3.0",
     "react-collapse": "^2.3.3",
     "react-color": "^2.10.0",

src/components/inputs/AutocompleteInput.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import Autocomplete from 'react-autocomplete'
+import input from '../../config/input'
+import colors from '../../config/colors'
+import { margins, fontSizes } from '../../config/scales'
+
+class AutocompleteInput extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string.isRequired,
+    options: React.PropTypes.array.isRequired,
+    style: React.PropTypes.object,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+		return <Autocomplete
+			menuStyle={{
+				border: 'none',
+        padding: '2px 0',
+        position: 'fixed',
+        overflow: 'auto',
+        maxHeight: '50%',
+			}}
+			inputProps={{
+        style: {
+					...input.input,
+					width: null,
+          ...this.props.style,
+				}
+			}}
+      value={this.props.value}
+			items={this.props.options}
+			getItemValue={(item) => item[0]}
+			onSelect={v => this.props.onChange(v)}
+      onChange={(e, v) => this.props.onChange(v)}
+			renderItem={(item, isHighlighted) => (
+				<div
+					key={item[0]}
+					style={{
+						userSelect: 'none',
+						color: colors.lowgray,
+						background: isHighlighted ? colors.midgray : colors.gray,
+						padding: margins[0],
+						fontSize: fontSizes[5],
+					}}
+				>
+			   {item[1]}
+				</div>
+			)}
+		/>
+  }
+}
+
+export default AutocompleteInput

src/components/layers/LayerSourceBlock.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {
   static propTypes = {
@@ -13,10 +14,10 @@ class LayerSourceBlock extends React.Component {
 
   render() {
     return <InputBlock label={"Source"}>
-      <SelectInput
+      <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
-        options={this.props.sourceIds.map(s => [s, s])}
+        options={this.props.sourceIds.map(src => [src, src])}
       />
     </InputBlock>
   }

src/components/layers/LayerSourceLayerBlock.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {
   static propTypes = {
@@ -13,7 +14,7 @@ class LayerSourceLayer extends React.Component {
 
   render() {
     return <InputBlock label={"Source Layer"}>
-      <SelectInput
+      <AutocompleteInput
         value={this.props.value}
         onChange={this.props.onChange}
         options={this.props.sourceLayerIds.map(l => [l, l])}