Add `datepicker` and `typeahead`,

Add:
    static/sass/index.sass
        -Add style rules for `datepicker` and `typeahead` elements.

    templates/index.html
        -Add any class specifiers required by both libraries to their
        corresponding elements.
        -Add a hack-ish `script` tag containing setup for `typeahead`.

static/sass/index.sass

@@ -5,6 +5,38 @@
 @import mixins
 @import variables
 
+.ui-datepicker
+    font-size: 0.7em
+
+.twitter-typeahead
+    width: 100%
+
+.tt-hint
+    color: $baseColor2
+
+.tt-dropdown-menu
+    width: 100%
+    padding: 4px 0
+    background-color: white
+    border: 1px solid $baseColor2
+
+    .tt-suggestion
+        padding: 4px
+
+        p
+            margin: 0
+
+            strong
+                color: $baseColor1
+
+        &.tt-cursor
+            @extend .t1
+
+            background-color: $baseColor1
+
+            *
+                color: white
+
 div#search-field
     @extend .t2
 
@@ -74,16 +106,28 @@ div#search-field
                             font-size: 1.1em
 
                 input[type="text"]
+                    @extend .t2
+
                     border-color: $baseColor3
                     font-size: 1em
                     padding: 2px
                     width: 100%
 
+                    &:hover
+                        border-color: $baseColor2
+
+                    &:focus
+                        border-color: $baseColor1
+
                 #upper-half
                     >div
                         float: left
                         width: 50%
 
+                    #col2
+                        input[type="text"]
+                            width: 50%
+
     &.partly-visible
         height: 1%
         margin-top: 3%

templates/index.html

@@ -5,13 +5,16 @@
 = endblock
 
 = block head
-  {{ assets.tag("index.css") }}
+  {{ assets.tag("jqueryui.custom.min.css") }}
   {{ assets.tag("jquery.min.js") }}
+  {{ assets.tag("jquery-ui.min.js") }}
+  {{ assets.tag("typeahead.bundle.min.js") }}
+
+  {{ assets.tag("index.css") }}
 = endblock
 
 = block body
   <div id="search-field" class="partly-visible">
-
     <div id="title">
       <span id="title-bit">bit</span
       ><span id="title-angle">&laquo;</span
@@ -21,38 +24,34 @@
     <form id="search-bar">
       <input type="text" name="query">
       <div id="advanced-search">
-
         <!-- Tags are closed on the following line to remove whitespace between divs. -->
         <div id="col1">
-          + Add group
+          + Add group <!-- Placeholder.  -->
         </div><div id="col2">
           <div id="upper-half">
             <div id="col1">
               <ul>
                 <li>
                   <label for="languages">Languages</label>
-                  <input type="text" name="languages" id="languages"><br>
+                  <input class="typeahead" type="text" name="languages" id="languages"><br>
                 </li>
 
                 <li>
                   <label for="authors">Authors</label>
                   <input type="text" name="authors" id="authors"><br>
                 </li>
-
               </ul>
-
             </div><div id="col2">
               <ul>
                 <li>
-                  <label for="date">Date last modified</label>
-                  <input type="text" name="date-last-modifi id="date"ed">
+                  <label for="date-last-modified">Date last modified</label>
+                  <input type="text" name="date-last-modified" id="date-last-modified">
                 </li>
 
                 <li>
-                  <label for="date">Date created</label>
-                  <input type="text" name="date-creat id="date"ed">
+                  <label for="date-created">Date created</label>
+                  <input type="text" name="date-created" id="date-created">
                 </li>
-
               </ul>
             </div>
           </div>
@@ -78,16 +77,41 @@
                 <label for="variables">Variables</label>
                 <input type="text" name="variables" id="variables"><br>
               </li>
-
-            <u/l>
+            </ul>
           </div>
         </div>
       </div>
     </form>
   </div>
 
-  <div id="results">
-  </div>
+  <div id="results"></div>
 
   {{ assets.tag("index.js") }}
+  <script>
+    TYPEAHEAD_LANGUAGES = {{ typeahead_languages | safe }};
+    $(function() {
+      $("#date-last-modified").datepicker();
+      $("#date-created").datepicker();
+    });
+
+    var languages = new Bloodhound({
+      datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
+      queryTokenizer: Bloodhound.tokenizers.whitespace,
+      local: $.map(TYPEAHEAD_LANGUAGES, function(state){
+        return {value : state};
+      })
+    });
+
+    languages.initialize();
+    $(".typeahead").typeahead({
+        hint: true,
+        highlight: true,
+        minLength: 1
+      },
+      {
+        name: "languages",
+        displayKey: 'value',
+        source: languages.ttAdapter()
+      });
+  </script>
 = endblock