Add autocomplete input to advanced search form

Autocomplete search suggests cuisine types for users. Issue #26 However, users can ignore suggestions and submit their own input. (ex. "chinese" instead of "Chinese.") Socrata returns search results only if user query matches the character case of what's on record (i.e. "Chinese.") Disable autocomplete input for now.
CodeWritingCow · Apr 2, 2018 · 3895f21 · 3895f21
1 parent d461f6c
commit 3895f21
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 15 deletions.
diff --git a/views/partials/advancedSearchForm.hbs b/views/partials/advancedSearchForm.hbs
@@ -2,12 +2,10 @@
 <form class="col s12" action="/search" method="POST">
 	<div class="row">
 		<div class="input-field col s12 m8">
-			<i class="material-icons prefix">restaurant</i>
 			<label for="dba">Restaurant Name</label>
 			<input type="text" name="dba">
 		</div>
 		<div class="input-field col s12 m4">
-			<i class="material-icons prefix">location_city</i>
 			<select id="boro" name="boro">
 				<option value="" disabled selected>None</option>
 				<option value="BRONX">Bronx</option>
@@ -18,8 +16,22 @@
 			</select>
 			<label>Borough</label>
 		</div>		
+	</div>
+
+<!-- 	<div class="row">
+	    <div class="col s12">
+	      <div class="row">
+	        <div class="input-field col s12 m8">
+	          <i class="material-icons prefix">textsms</i>
+	          <input type="text" id="autocomplete-input" class="autocomplete" name="cuisine_description">
+	          <label for="autocomplete-input">Cuisine Type<span class="hide-on-small-only"> (Autocomplete)</span></label>
+	        </div>
+	      </div>
+	    </div>
+	  </div> -->
 
-		<div class="input-field col s12 m6">
+	<div class="row">
+		<div class="input-field col s12 m8">
 			<select name="cuisine_description" id="cuisine_description">
 				<option value="" disabled selected>None</option>
 				<optgroup label="Fast Foods">
@@ -89,21 +101,17 @@
 			</select>
 			<label>Cuisine Type</label>
 		</div>
-	</div>
-
-	<div class="row">
-		<div class="input-field col s12 m6">
+		<div class="input-field col s12 m4">
 			<label for="zipcode">ZIP Code</label>
 			<input type="text" name="zipcode" pattern="[0-9]{5}" title="ZIP code must be a five-digit number">
+		</div>		
+	</div>
 
-			<label for="street">Street</label>
+<!-- 			<label for="street">Street</label>
 			<input disabled type="text" name="street" placeholder="street address">
 
 			<label for="city">City</label>
-			<input disabled type="text" name="city" placeholder="city">
-		</div>
-
-	</div>
+			<input disabled type="text" name="city" placeholder="city"> -->
 
 <!-- 	<fieldset>
 		<label for="startDate">Start:</label>

diff --git a/views/search.hbs b/views/search.hbs
@@ -19,8 +19,7 @@
 			    <h1 style="font-weight: bold;">{{pageTitle}}</h1>
 	    	</div>    	
 	    	<div class="container">
-		    	{{> searchForm}}
-		    	{{> searchResults}}
+		    	{{> advancedSearchForm}}
 	    	</div>
     	</main>
     	{{> footer}}
@@ -33,6 +32,60 @@
 		 $(document).ready(function() {
 		    $('select').material_select();
 		    $(".button-collapse").sideNav();
+			// $('input.autocomplete').autocomplete({
+			//     data: {
+			//       "African": null,
+			//       "American": null,
+			//       "Armenian": null,			      
+			//       "Asian": null,
+			//       "Bagels/Pretzels": null,
+			//       "Bakery": null,
+			//       "CafÃ©/Coffee/Tea": null,
+			//       "Caribbean": null,
+			//       "Chicken": null,
+			//       "Chinese": null,
+			//       "Chinese/Japanese": null,
+			//       "Delicatessen": null,			    	
+			//       "Donuts": null,
+			//       "Eastern European": null,
+			//       "Ethiopian": null,
+			//       "Filipino": null,
+			//       "Fruits/Vegetables": null,
+			//       "German": null,
+			//       "Greek": null,
+			//       "Hamburgers": null,
+			//       "Ice Cream, Gelato, Yogurt, Ices": null,
+			//       "Indian": null,
+			//       "Italian": null,
+			//       "Japanese": null,
+			//       "Jewish/Kosher": null,
+			//       "Korean": null,
+			//       "Latin (Cuban, Dominican, Puerto Rican, South & Central American)": null,
+			//       "Mediterranean": null,
+			//       "Mexican": null,
+			//       "Other": null,
+			//       "Pancakes/Waffles": null,
+			//       "Peruvian": null,
+			//       "Pizza": null,
+			//       "Polish": null,
+			//       "Russian": null,
+			//       "Salads": null,
+			//       "Sandwiches": null,
+			//       "Sandwiches/Salads/Mixed Buffet": null,
+			//       "Seafood": null,
+			//       "Soul Food": null,
+			//       "Spanish": null,
+			//       "Tex-Mex": null,
+			//       "Thai": null,
+			//       "Vegetarian": null,
+			//       "Vietnamese/Cambodian/Malaysia": null
+			//     },
+			//     limit: 5, // The max amount of results that can be shown at once. Default: Infinity.
+			//     onAutocomplete: function(val) {
+			//       // Callback function when value is autcompleted.
+			//     },
+			//     minLength: 2, // The minimum length of the input for the autocomplete to start. Default: 1.
+			//   });		    
 		  });        	
-    </script>    
+    </script>
 </html>