improve user autocomplete, one step closer to ditching jquery-ui

app/templating/AssetHelper.scala

@@ -74,9 +74,9 @@ trait AssetHelper { self: I18nHelper =>
     local = staticUrl("vendor/tagmanager/tagmanager.js"))
 
   val typeaheadTag = cdnOrLocal(
-    cdn = "http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.2/typeahead.bundle.min.js",
+    cdn = "http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js",
     test = "$.typeahead",
-    local = staticUrl("vendor/typeahead.bundle.min.js"))
+    local = staticUrl("javascripts/vendor/typeahead.bundle.min.js"))
 
   val fingerprintTag = Html {
     """<script src="http://cdn.jsdelivr.net/fingerprintjs2/0.7/fingerprint2.min.js"></script>"""

app/views/message/form.scala.html

@@ -24,8 +24,7 @@ title = trans.composeMessage.str()) {
         }.getOrElse {
         <input
         type="text"
-        data-provider="@routes.User.autocomplete"
-        class="autocomplete"
+        class="user-autocomplete"
         required="required"
         name="@form("username").name"
         id="@form("username").id"

app/views/report/form.scala.html

@@ -19,8 +19,7 @@
       }.getOrElse {
       <input
       type="text"
-      data-provider="@routes.User.autocomplete"
-      class="autocomplete"
+      class="user-autocomplete"
       required="required"
       name="@form("username").name"
       id="@form("username").id"

app/views/user/list.scala.html

@@ -38,8 +38,8 @@
 
 @side = {
 <div class="side">
-  <form class="search public" action="@routes.User.show("")">
-    <input placeholder="@trans.search()" class="search_user autocomplete" data-provider="@routes.User.autocomplete" />
+  <form class="search public">
+    <input placeholder="@trans.search()" class="search_user user-autocomplete-jump" />
   </form>
   @if(isGranted(_.UserSearch)) {
   <form class="search" action="@routes.Mod.search" method="GET">

public/javascripts/big.js

@@ -1068,12 +1068,40 @@ lichess.numberFormat = (function() {
       translateTexts();
       $('body').on('lichess.content_loaded', translateTexts);
 
-      $('input.autocomplete').each(function() {
-        var $a = $(this);
-        $a.autocomplete({
-          source: $a.data('provider'),
-          minLength: 2,
-          delay: 100
+
+      var userAutocomplete = function($input) {
+        lichess.loadCss('/assets/stylesheets/autocomplete.css');
+        lichess.loadScript('/assets/javascripts/vendor/typeahead.jquery.min.js').done(function() {
+          $input.typeahead(null, {
+            minLength: 2,
+            hint: true,
+            highlight: false,
+            source: function(query, sync, async) {
+              $.ajax({
+                url: '/player/autocomplete?term=' + query,
+                success: function(res) {
+                  // hack to fix typeahead limit bug
+                  if (res.length === 10) res.push(null);
+                  async(res);
+                }
+              });
+            },
+            limit: 10,
+            templates: {
+              empty: '<div class="empty">No player found</div>',
+              pending: lichess.spinnerHtml,
+              suggestion: function(a) {
+                return '<span>' + a + '<span>';
+              }
+            }
+          }).focus();
+        });
+      };
+
+      $('input.user-autocomplete').each(function() {
+        if ($(this).attr('autofocus')) userAutocomplete($(this));
+        else $(this).one('focus', function() {
+          userAutocomplete($(this));
         });
       });
 

public/javascripts/user.js

@@ -1,19 +1,39 @@
 $(function() {
 
-  var $searchForm = $('form.search.public');
-
-  if ($searchForm.length) {
-    $searchInput = $searchForm.find('input.search_user');
-    $searchInput.on('autocompleteselect', function(e, ui) {
-      setTimeout(function() {
-        $searchForm.submit();
-      }, 10);
+  $('input.user-autocomplete-jump').one('focus', function() {
+    var go = function(name) {
+      location.href = '/@/' + name;
+    }
+    var $input = $(this);
+    lichess.loadCss('/assets/stylesheets/autocomplete.css');
+    lichess.loadScript('/assets/javascripts/vendor/typeahead.jquery.min.js').done(function() {
+      $input.typeahead(null, {
+        minLength: 2,
+        hint: true,
+        highlight: true,
+        source: function(query, sync, async) {
+          $.ajax({
+            url: '/player/autocomplete?term=' + query,
+            success: function(res) {
+              // hack to fix typeahead limit bug
+              if (res.length === 10) res.push(null);
+              async(res);
+            }
+          });
+        },
+        limit: 10,
+        templates: {
+          empty: '<div class="empty">No player found</div>',
+          pending: lichess.spinnerHtml,
+          suggestion: $.userLink
+        }
+      }).bind('typeahead:select', function(ev, sel) {
+        go(sel);
+      }).keypress(function(e) {
+        if (e.which == 10 || e.which == 13) go($(this).val());
+      }).focus();
     });
-    $searchForm.submit(function() {
-      location.href = $searchForm.attr('action') + $searchInput.val();
-      return false;
-    });
-  }
+  });
 
   $("div.user_show .mod_zone_toggle").each(function() {
     $(this).click(function() {

public/stylesheets/autocomplete.css

@@ -0,0 +1,37 @@
+.tt-menu {
+  box-sizing: border-box;
+  width: 198px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
+}
+.tt-menu .empty {
+  padding: 5px 0 5px 10px;
+}
+.tt-menu .spinner {
+  margin: 10px auto;
+  width: 20px;
+  height: 20px;
+}
+.tt-suggestion {
+  color: #444;
+  padding: 5px 0 5px 10px;
+  line-height: 24px;
+  display: block;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+}
+.tt-suggestion:hover {
+  background: rgba(56,147,232,0.2);
+  /* color: #fff; */
+}
+.tt-suggestion.tt-cursor {
+  background: #3893E8;
+  color: #fff;
+}
+.tt-hint {
+  color: #aaa;
+}
+.tt-highlight {
+  opacity: 0.5;
+}

public/stylesheets/common.css

@@ -812,9 +812,10 @@ div.side form.search {
   margin: 1em 0 0 0;
 }
 div.side form.search input {
+  box-sizing: border-box;
   border: 1px solid #ccc;
   padding: 3px 5px;
-  width: 186px;
+  width: 198px;
 }
 #site_header div.side_menu {
   margin-top: 15px;

public/stylesheets/qa.css

@@ -284,7 +284,7 @@ div.side .questions a:hover {
 .tt-hint {
   display: none;
 }
-.tt-dropdown-menu {
+.tt-menu {
   width: 422px;
   margin-top: 12px;
   padding: 8px 0;