Create lib/ structure, clean up js.

Add:
    static/(css, js)/lib
        -Add directories to contain third-party library files (eg,
        `jquery.min.js`).

    templates/index.html, static/js/index.js
        -Move `typeahead` initialization from `index.html` to `index.js`.

    static/sass/index.sass
        -Refactor `twitter-typeahead` specifier hierarchy.

.gitignore

@@ -1,4 +1,5 @@
-static/css
+static/css/*
+!static/css/lib/*
 
 *.swp
 .sass-cache
@@ -23,7 +24,6 @@ var
 sdist
 develop-eggs
 .installed.cfg
-lib
 lib64
 __pycache__
 

static/js/index.js

@@ -1,8 +1,33 @@
 /*
- * @file Manages all query entry, `index.html` server querying, and results
- *      diplay.
+ * @file Manages all library initialization, query entry, server
+ *  querying, and results diplay for `index.html`.
  */
 
+$(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();
+$("#languages.typeahead").typeahead({
+        hint: true,
+        highlight: true,
+        minLength: 1
+    },
+    {
+        name: "languages",
+        displayKey: 'value',
+        source: languages.ttAdapter()
+});
+
 FINISH_TYPING_INTERVAL = 650;
 searchBar = $("form#search-bar input[type='text']")[0];
 resultsDiv = $("div#results")[0];

static/sass/index.sass

@@ -11,31 +11,31 @@
 .twitter-typeahead
     width: 100%
 
-.tt-hint
-    color: $baseColor2
+    .tt-hint
+        color: $baseColor2
 
-.tt-dropdown-menu
-    width: 100%
-    padding: 4px 0
-    background-color: white
-    border: 1px solid $baseColor2
+    .tt-dropdown-menu
+        width: 100%
+        padding: 4px 0
+        background-color: white
+        border: 1px solid $baseColor2
 
-    .tt-suggestion
-        padding: 4px
+        .tt-suggestion
+            padding: 4px
 
-        p
-            margin: 0
+            p
+                margin: 0
 
-            strong
-                color: $baseColor1
+                strong
+                    color: $baseColor1
 
-        &.tt-cursor
-            @extend .t1
+            &.tt-cursor
+                @extend .t1
 
-            background-color: $baseColor1
+                background-color: $baseColor1
 
-            *
-                color: white
+                *
+                    color: white
 
 div#search-field
     @extend .t2
@@ -81,7 +81,13 @@ div#search-field
             background-color: white
             border: 1px solid $baseColor2
             margin: 0px
+            max-height: 0.1px
             overflow: auto
+            padding: 0px
+
+            &.visible
+                max-height: 100%
+                padding-bottom: 30px
 
             >div
                 @include vendor(box-sizing, border-box)
@@ -110,7 +116,7 @@ div#search-field
 
                     border-color: $baseColor3
                     font-size: 1em
-                    padding: 2px
+                    padding: 4px
                     width: 100%
 
                     &:hover

templates/index.html

@@ -5,12 +5,16 @@
 = endblock
 
 = block head
-  {{ 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("lib/jqueryui.custom.min.css") }}
+  {{ assets.tag("lib/jquery.min.js") }}
+  {{ assets.tag("lib/jquery-ui.min.js") }}
+  {{ assets.tag("lib/typeahead.bundle.min.js") }}
 
   {{ assets.tag("index.css") }}
+
+  <script>
+    TYPEAHEAD_LANGUAGES = {{ typeahead_languages | safe }};
+  </script>
 = endblock
 
 = block body
@@ -60,7 +64,7 @@
             <ul>
               <li>
                 <label for="symbols">Symbols</label>
-                <input type="text" name="symbols" id="symbols"><br>
+                <input class="typeahead" type="text" name="symbols" id="symbols"><br>
               </li>
 
               <li>
@@ -87,31 +91,4 @@
   <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