* Use jquery-ui's autocomplete module instead of typeahead

* Enable support for multiple tag autocomplete

app/assets/javascripts/application.js

@@ -2,7 +2,6 @@
 //= require jquery-ui-1.10.3.min.js
 //= require jquery.hotkeys.js
 //= require jquery.timeout.js
-//= require typeahead.min.js
 //= require rails.js
 //= require common.js
 //= require_self

app/assets/javascripts/artists.js

@@ -6,19 +6,30 @@
       Danbooru.Artist.initialize_check_name_link();
 
       if (Danbooru.meta("enable-auto-complete") === "true") {
-        Danbooru.Artist.initialize_typeahead();
+        Danbooru.Artist.initialize_auto_complete();
       }
     }
   }
 
-  Danbooru.Artist.initialize_typeahead = function() {
+  Danbooru.Artist.initialize_auto_complete = function() {
-    $("#quick_search_name").typeahead({
+    $("#quick_search_name").autocomplete({
-      name: "artists",
+      source: function(req, resp) {
-      remote: "/artists.json?search[name]=*%QUERY*",
+        $.ajax({
-      limit: 10,
+          url: "/artists.json",
-      valueKey: "name",
+          data: {
-      template: function(context) {
+            "search[name]": "*" + req.term + "*"
-        return "<p>" + context.name.replace(/_/g, " ") + "</p>";
+          },
+          method: "get",
+          minLength: 2,
+          success: function(data) {
+            resp($.map(data, function(tag) {
+              return {
+                label: tag.name,
+                value: tag.name
+              };
+            }));
+          }
+        });
       }
     });
   }

app/assets/javascripts/pools.js

@@ -14,13 +14,25 @@
   Danbooru.Pool.initialize_add_to_pool_link = function() {
     $("#add-to-pool-dialog").dialog({autoOpen: false});
 
-    $("#c-pool-elements #a-new input[type=text]").typeahead({
+    $("#c-pool-elements #a-new input[type=text]").autocomplete({
-      name: "pools",
+      source: function(req, resp) {
-      remote: "/pools.json?search[is_active]=true&search[name_matches]=%QUERY",
+        $.ajax({
-      limit: 10,
+          url: "/pools.json",
-      valueKey: "name",
+          data: {
-      template: function(context) {
+            "search[is_active]": "true"
-        return "<p>" + context.name.replace(/_/g, " ") + "</p>";
+            "search[name_matches]": req.term
+          },
+          method: "get",
+          minLength: 2,
+          success: function(data) {
+            resp($.map(data, function(tag) {
+              return {
+                label: tag.name.replace(/_/g, " "),
+                value: tag.name
+              };
+            }));
+          }
+        });
       }
     });
 

app/assets/javascripts/posts.js

@@ -36,13 +36,36 @@
   }
 
   Danbooru.Post.initialize_tag_autocomplete = function() {
-    $("#tags").typeahead({
+    $("#tags,#post_tag_string,#upload_tag_string").autocomplete({
-      name: "tags",
+      focus: function() {
-      remote: "/tags.json?search[order]=count&search[name_matches]=%QUERY*",
+        return false;
-      limit: 10,
+      },
-      valueKey: "name",
+      select: function(event, ui) {
-      template: function(context) {
+        var terms = this.value.match(/\S+/g);
-        return "<p class=\"category-" + context.category + "\"><a>" + context.name + "</a></p>";
+        terms.pop();
+        terms.push(ui.item.value);
+        this.value = terms.join(" ") + " ";
+        return false;
+      },
+      source: function(req, resp) {
+        var term = req.term.match(/\S+/g).pop();
+        $.ajax({
+          url: "/tags.json",
+          data: {
+            "search[order]": "count",
+            "search[name_matches]": term + "*"
+          },
+          method: "get",
+          minLength: 2,
+          success: function(data) {
+            resp($.map(data, function(tag) {
+              return {
+                label: tag.name,
+                value: tag.name
+              };
+            }));
+          }
+        });
       }
     });
   }

app/assets/javascripts/wiki_pages.js

@@ -3,17 +3,32 @@
 
   Danbooru.WikiPage.initialize_all = function() {
     if ($("#c-wiki-pages").length) {
-      if (Danbooru.meta("enable-auto-complete") === "true") {
+      this.initialize_typeahead();
-        $("#quick_search_title,#wiki_page_title").typeahead({
+    }
-          name: "wiki_pages",
+  }
-          remote: "/wiki_pages.json?search[title]=*%QUERY*",
+
-          limit: 10,
+  Danbooru.WikiPage.initialize_typeahead = function() {
-          valueKey: "title",
+    if (Danbooru.meta("enable-auto-complete") === "true") {
-          template: function(context) {
+      $("#quick_search_title,#wiki_page_title").autocomplete({
-            return "<p>" + context.title.replace(/_/g, " ") + "</p>";
+        source: function(req, resp) {
-          }
+          $.ajax({
-        });
+            url: "/wiki_pages.json",
-      }
+            data: {
+              "search[title]": "*" + req.term + "*"
+            },
+            method: "get",
+            minLength: 2,
+            success: function(data) {
+              resp($.map(data, function(tag) {
+                return {
+                  label: tag.title.replace(/_/g, " "),
+                  value: tag.title
+                };
+              }));
+            }
+          });
+        }
+      });
     }
   }
 })();

app/assets/stylesheets/specific/posts.css.scss

@@ -50,27 +50,6 @@ a.blacklisted-active {
   background-color: rgba(0,0,0,0.1);
 }
 
-.tt-suggestions {
-  background: white;
-  display: block;
-  border: 1px solid black;
-  margin: 0;
-  padding: 0;
-}
-
-.tt-suggestion {
-  background: white;
-  padding: 0.25em 0.5em;
-}
-
-.tt-is-under-cursor {
-  background: $highlight_color;
-}
-
-.tt-suggestion p {
-  margin: 0;
-}
-
 #has-parent-relationship-preview, #has-children-relationship-preview {
   overflow-x: auto;
   white-space: nowrap;