separate out ListSearchField into its own component.

frontend/src/components/search/ListSearchField.jsx

+import React, { Component, PropTypes } from "react";
+
+import Icon from "metabase/components/Icon.jsx";
+
+
+export default class ListSearchField extends Component {
+
+    static propTypes = {
+        onChange: PropTypes.func.isRequired,
+        placeholder: PropTypes.string,
+        searchText: PropTypes.string
+    };
+
+    static defaultProps = {
+        className: "bordered rounded text-grey-2 flex flex-full align-center",
+        inputClassName: "p1 h4 input--borderless text-default flex-full",
+        placeholder: "Find a table",
+        searchText: ""
+    };
+
+    render() {
+        const { className, inputClassName, onChange, placeholder, searchText } = this.props;
+
+        return (
+            <div className={className}>
+                <span className="px1">
+                    <Icon name="search" width="16" height="16"/>
+                </span>
+                <input
+                    className={inputClassName}
+                    type="text"
+                    placeholder={placeholder}
+                    value={searchText}
+                    onChange={(e) => onChange(e.target.value)}
+                />
+            </div>
+        );
+    }
+}

frontend/src/css/core/inputs.css

@@ -22,6 +22,13 @@
   transition: border .3s linear;
 }
 
+.input--borderless,
+.input--borderless:focus {
+  box-shadow: none;
+  outline: 0;
+  border: none !important;
+}
+
 .input:disabled {
   opacity: .5;
   cursor: not-allowed;

frontend/src/query_builder/AccordianList.jsx

 import React, { Component, PropTypes } from "react";
+import cx from "classnames";
+import _ from "underscore";
 
 import Icon from "metabase/components/Icon.jsx";
+import ListSearchField from "metabase/components/search/ListSearchField.jsx";
 
-import cx from "classnames";
-import _ from "underscore";
 
 export default class AccordianList extends Component {
     constructor(props, context) {
@@ -170,16 +171,10 @@ export default class AccordianList extends Component {
                             /* NOTE: much of this structure is here just to match strange stuff in 'List-item' below so things align properly */
                             <div className="px1 pt1">
                                 <div style={{border: "2px solid transparent", borderRadius: "6px"}}>
-                                    <div className="bordered rounded text-grey-2 flex flex-full align-center">
-                                        <span className="px1"><Icon name="search" width="16" height="16"/></span>
-                                        <input
-                                            className="AdminInput h5 borderless flex-full"
-                                            type="text"
-                                            placeholder="Find a table"
-                                            value={this.state.searchText}
-                                            onChange={(e) => this.setState({searchText: e.target.value})}
-                                        />
-                                    </div>
+                                    <ListSearchField
+                                        onChange={(val) => this.setState({searchText: val})}
+                                        searchText={this.state.searchText}
+                                    />
                                 </div>
                             </div>
                         }