Autocomplete names of schools on quote page.

app/styles/teachers/request-quote-view.sass

@@ -49,3 +49,48 @@
       
   .text-h1
     margin: 40px 0 30px
+
+  
+.algolia-autocomplete 
+  width: 100%;
+
+  .aa-input
+    width: 100%
+
+  .aa-hint
+    color: #999
+    width: 100%
+
+  .aa-dropdown-menu 
+    background-color: #fff
+    border: 1px solid #999
+    border-top: none
+    width: 100%
+
+    .aa-suggestion 
+      cursor: pointer
+      padding: 5px 4px
+      border-top: 1px solid #ccc
+
+      .school
+        font-family: Open Sans
+        font-size: 14px
+        line-height: 20px
+        font-weight: bold
+
+      .district
+        font-family: Open Sans
+        font-size: 14px
+        line-height: 20px
+
+        span
+          white-space: nowrap
+
+
+    .aa-suggestion.aa-cursor 
+      background-color: #B2D7FF
+
+    em
+      font-weight: bold
+      font-style: normal
+

app/templates/teachers/request-quote-view.jade

@@ -96,7 +96,7 @@ block content
           .col-md-offset-2.col-md-4.col-sm-6
             .form-group
               label.control-label(data-i18n="teachers_quote.organization_label")
-              input.form-control(name="organization")
+              input.form-control#organization-control(name="organization")
 
           .col-md-4.col-sm-6
             .form-group

app/views/teachers/RequestQuoteView.coffee

@@ -57,6 +57,27 @@ module.exports = class RequestQuoteView extends RootView
       @$('#other-education-level-input').val(obj.otherInput)
       forms.objectToForm(@$('#request-form'), obj, { overwriteExisting: true })
 
+    client = algoliasearch("JJM5H2CHJR", "50382fc2f7fa69c67e8233ace7cd7c4c")
+    index = client.initIndex('schools')
+    autocomplete("#organization-control", {hint: false}, [
+      source: (query, callback) ->
+        index.search(query, { hitsPerPage: 5, aroundLatLngViaIP: false }).then (answer) ->
+          callback answer.hits
+        , ->
+          callback []
+      displayKey: 'name',
+      templates:
+        suggestion: (suggestion) ->
+          hr = suggestion._highlightResult
+          "<div class='school'> #{hr.name.value} </div>" + 
+            "<div class='district'>#{hr.district.value}, " +
+              "<span>#{hr.city?.value}, #{hr.state.value}</span></div>"
+
+    ]).on 'autocomplete:selected', (event, suggestion, dataset) ->
+      #TODO: Figure out why this event is never called.
+      console.log('S', suggestion)
+      
+
   onChangeRequestForm: ->
     # save changes to local storage
     obj = forms.formToObject(@$('form'))

bower.json

@@ -49,7 +49,9 @@
     "fastclick": "~1.0.3",
     "three.js": "~0.71.0",
     "lscache": "~1.0.5",
-    "esper.js": "http://files.codecombat.com/esper.tar.gz"
+    "esper.js": "http://files.codecombat.com/esper.tar.gz",
+    "algoliasearch": "^3.13.1",
+    "algolia-autocomplete.js": "^1.17.0"
   },
   "overrides": {
     "backbone": {