form changes

client/homebrew/pages/archivePage/archivePage.jsx

@@ -164,6 +164,16 @@ const ArchivePage = createClass({
         );
     },
 
+    validateInput: function (e) {
+        const textInput = e.target
+        const submitButton = document.getElementById('searchButton');
+        if (textInput.value.length > 3) {
+            submitButton.disabled = false;
+        } else {
+            submitButton.disabled = true;
+        }
+    },
+
     renderForm: function () {
         return (
             <div className="brewLookup">
@@ -176,6 +186,9 @@ const ArchivePage = createClass({
                             type="text"
                             name="title"
                             defaultValue={this.state.title}
+                            onKeyUp={(e) => {
+                                this.validateInput(e);
+                            }}
                             onKeyDown={(e) => {
                                 if (e.key === 'Enter') {
                                     this.loadTotal();
@@ -191,15 +204,14 @@ const ArchivePage = createClass({
                     </small>
                     <label>
                         Results per page
-                        <input
+                        <select name="pageSize" id="size">
-                            id="size"
+                            <option value="6">6</option>
-                            type="number"
+                            <option value="10" default>10</option>
-                            min="6"
+                            <option value="16">16</option>
-                            step="2"
+                            <option value="20">20</option>
-                            max="30"
+                            <option value="24">24</option>
-                            defaultValue={this.state.pageSize}
+                            <option value="30">30</option>
-                            name="pageSize"
+                        </select>
-                        />
                     </label>
 
                     <label>
@@ -230,11 +242,12 @@ const ArchivePage = createClass({
             		*/}
 
                     <button
-                        className="search"
+                        id="searchButton"
                         onClick={() => {
                             this.loadTotal();
                             this.loadPage(1, true);
                         }}
+                        disabled
                     >
                         Search
                         <i

client/homebrew/pages/archivePage/archivePage.less

@@ -83,7 +83,7 @@ body {
                     input {
                         margin: 0 10px;
                     }
-                    .search {
+                    .searchButton {
                         position:absolute;
                         right:10px;
                         bottom:20px;