diff --git a/static/js/index.advanced-search-form.js b/static/js/index.advanced-search-form.js
new file mode 100644
index 0000000..f918d58
--- /dev/null
+++ b/static/js/index.advanced-search-form.js
@@ -0,0 +1,112 @@
+/*
+ * @file Manages all advanced search form logic.
+ */
+
+var searchGroups = $("div#search-groups");
+
+/*
+ * Load all advanced search form libraries.
+ */
+(function loadInputFieldWidgets(){
+    $(".search-group input#date-last-modified").datepicker();
+    $(".search-group input#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();
+    $("#language.typeahead").typeahead({
+            hint: true,
+            highlight: true,
+            minLength: 1
+        },
+        {
+            name: "languages",
+            displayKey: "value",
+            source: languages.ttAdapter()
+    });
+}());
+
+/*
+ * Set all advanced search form button callbacks.
+ */
+(function setSearchFormCallbacks(){
+    // Create a new search group, and update the `#sidebar` checklist accordingly.
+    $("button#add-group").click(function(){
+        $("div#sidebar input[type=checkbox]").prop("checked", false);
+
+        searchGroups.children("#selected").removeAttr("id");
+        var searchGroup = $("<div/>", {class : "search-group", id : "selected"});
+        searchGroups.append(searchGroup.append(createSearchGroupInput("language")));
+        $("div#sidebar input[type=checkbox]#language").prop("checked", true);
+    });
+
+    // Remove the currently selected group if it's not the only one, and mark one
+    // of its siblings as selected.
+    $("button#remove-group").click(function(){
+        var currentGroup = $("div.search-group#selected");
+
+        if($("div.search-group").length == 1)
+            return;
+        else {
+            var nextGroup = currentGroup.prev();
+            if(nextGroup.size() == 0)
+                nextGroup = currentGroup.next();
+        }
+        currentGroup.remove();
+        nextGroup.click();
+    });
+
+    // Select a search group, and update the `#sidebar` checklist accordingly.
+    $(document).on("click", "div.search-group", function(){
+        searchGroups.children("#selected").removeAttr("id");
+        $(this).attr("id", "selected");
+        $("div#sidebar input[type=checkbox]").prop("checked", false);
+        $(this).find("input[type=text]").each(function(){
+            var checkBoxSelector = "div#sidebar input[type=checkbox]";
+            $(checkBoxSelector + "#" + $(this).attr("class").split(" ")[0]).
+                    prop("checked", true);
+        })
+    });
+
+    // Add an input field to the currently selected search group.
+    $("div#sidebar input[type=checkbox]").click(function(){
+        var fieldId = $(this).prop("id");
+        if($(this).is(":checked")){
+            $("div.search-group#selected").append(
+                    $.parseHTML(createSearchGroupInput(fieldId)));
+            if(fieldId.slice(0, 4) == "date")
+                $(".search-group#selected ." + fieldId).datepicker();
+        }
+        else
+            $("div.search-group#selected ." + fieldId).remove()
+    });
+}());
+
+/*
+ * Return an HTML string representing a new input field div in a search group.
+ *
+ * @param fieldId The id of the input field div, and its child elements.
+ */
+function createSearchGroupInput(fieldId){
+    return [
+        "<div id='" + fieldId + "'>",
+            "<div>" + fieldId.replace(/-/g, " ") + "</div>",
+            "<input class='" + fieldId + "'type='text'/>",
+            "<input type='checkbox' name='regex'><span>Regex</span>",
+        "</div>"
+    ].join("");
+}
+
+function assembleQuery(){
+    var groups = searchGroups.children(".search-group");
+    var groupQueries = [];
+
+    for(var group = 0; group < groups.length; group++)
+        console.log(group);
+}
diff --git a/static/js/index.js b/static/js/index.js
index e7d82df..13b404c 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -20,29 +20,6 @@ advancedSearchButton.click(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];
@@ -170,65 +147,3 @@ function loadMoreResults(){
             result * 20);
     }
 }
-
-var searchGroups = $("div#search-groups");
-
-// Create a new search group, and update the `#sidebar` checklist accordingly.
-$("button#add-group").click(function(){
-    $("div#sidebar input[type=checkbox]").prop("checked", false);
-
-    searchGroups.children("#selected").removeAttr("id");
-    var searchGroup = $("<div/>", {class : "search-group", id : "selected"});
-    searchGroups.append(searchGroup.append(createSearchGroupInput("language")));
-    $("div#sidebar input[type=checkbox]#language").prop("checked", true);
-});
-
-$("button#remove-group").click(function(){
-    var currentGroup = $("div.search-group#selected");
-
-    if($("div.search-group").length == 1)
-        return;
-    else {
-        var nextGroup = currentGroup.prev();
-        if(nextGroup.size() == 0)
-            nextGroup = currentGroup.next();
-    }
-    currentGroup.remove();
-    nextGroup.click();
-});
-
-// Select a search group, and update the `#sidebar` checklist accordingly.
-$(document).on("click", "div.search-group", function(){
-    searchGroups.children("#selected").removeAttr("id");
-    $(this).attr("id", "selected");
-    $("div#sidebar input[type=checkbox]").prop("checked", false);
-    $(this).find("input[type=text]").each(function(){
-        var checkBoxSelector = "div#sidebar input[type=checkbox]";
-        $(checkBoxSelector + "#" + $(this).attr("id")).prop("checked", true);
-    })
-});
-
-// Add an input field to the currently selected search group.
-$("div#sidebar input[type=checkbox]").click(function(){
-    var fieldId = $(this).prop("id");
-    if($(this).is(":checked"))
-        $("div.search-group#selected").append(
-            $.parseHTML(createSearchGroupInput(fieldId)));
-    else
-        $("div.search-group#selected #" + fieldId).remove()
-});
-
-/*
- * Return an HTML string representing a new input field div in a search group.
- *
- * @param fieldId The id of the input field div, and its child elements.
- */
-function createSearchGroupInput(fieldId){
-    return [
-        "<div id='" + fieldId + "'>",
-            "<div>" + fieldId.replace(/-/g, " ") + "</div>",
-            "<input id='" + fieldId + "'type='text'/>",
-            "<input type='checkbox' name='regex'><span>Regex</span>",
-        "</div>"
-    ].join("");
-}
diff --git a/static/sass/index.sass b/static/sass/index.sass
index 92baaf3..f0cf513 100644
--- a/static/sass/index.sass
+++ b/static/sass/index.sass
@@ -9,7 +9,8 @@
     font-size: 70%
 
 .twitter-typeahead
-    width: 100%
+    // display: inline-block
+    width: 60%
 
     .tt-hint
         color: $baseColor2
@@ -117,10 +118,11 @@ div#search-field
             background-color: white
             border: 1px solid $baseColor3
             font-size: 96%
+            height: 400px
             min-width: $minSearchFieldsWidth
             padding-top: 0px
             overflow-x: auto
-            height: 400px
+            overflow-y: hidden
 
             #heading
                 color: $baseColor2
@@ -242,15 +244,15 @@ div#search-field
                     >div
                         margin-bottom: 0.7%
 
-                        div
+                        >div
                             display: inline-block
                             width: 18%
 
-                        input[type=text]
+                        >input[type=text]
                             padding: 2px
                             width: 60%
 
-                        input[type=checkbox]
+                        >input[type=checkbox]
                             margin-left: 2%
 
                             &:checked + span
@@ -259,7 +261,7 @@ div#search-field
                                 color: green
                                 font-weight: bold
 
-                        span
+                        span.regex
                             font-size: 80%
 
                     &#selected
diff --git a/templates/index.html b/templates/index.html
index 44f7005..8a29071 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -84,8 +84,8 @@
           <div class="search-group" id="selected">
             <div id="language">
               <div>language</div>
-              <input id="language" type="text">
-              <input type="checkbox" name="regex"><span>Regex</span>
+              <input class="language" type="text">
+              <input type="checkbox" name="regex"><span class="regex">Regex</span>
             </div>
           </div>
         </div>
@@ -96,4 +96,5 @@
   <div id="results"></div>
 
   {{ assets.tag("index.js") }}
+  {{ assets.tag("index.advanced-search-form.js") }}
 = endblock