add basic autocomplete

apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex

@@ -39,7 +39,10 @@ defmodule BlockScoutWeb.ChainController do
     end
   end
 
-  def token_autocomplete(conn, %{"q" => term}) do
+  def token_autocomplete(conn, %{"q" => term}) when is_binary(term) do
+    if term == "" do
+      json(conn, "{}")
+    else
       result =
         term
         |> String.trim()
@@ -47,6 +50,11 @@ defmodule BlockScoutWeb.ChainController do
 
       json(conn, result)
     end
+  end
+
+  def token_autocomplete(conn, _) do
+    json(conn, "{}")
+  end
 
   def chain_blocks(conn, _params) do
     if ajax?(conn) do

apps/block_scout_web/lib/block_scout_web/csp_header.ex

@@ -13,8 +13,8 @@ defmodule BlockScoutWeb.CSPHeader do
       "content-security-policy" => "\
         connect-src 'self' #{websocket_endpoints(conn)}; \
         default-src 'self';\
-        script-src 'self' 'unsafe-inline' 'unsafe-eval';\
+        script-src 'self' 'unsafe-inline' 'unsafe-eval' http://nico-amsterdam.github.io;\
-        style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;\
+        style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com http://nico-amsterdam.github.io;\
         img-src 'self' 'unsafe-inline' 'unsafe-eval' data:;\
         font-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.gstatic.com data:;\
       "

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -78,9 +78,22 @@
         </li>
       </ul>
       <div class="search-form d-lg-flex d-inline-block">
-        <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
+        <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>          <!-- </div> -->
           <div class="input-group">
-            <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, token symbol name, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": gettext("Search"), "data-test": "search_input" %>
+              <%= awesomplete(f, :q,
+                   [
+                  class: "form-control me auto",
+                  placeholder: gettext("Search by address, token symbol name, transaction hash, or block number"),
+                  "aria-describedby": "search-icon",
+                  "aria-label": gettext("Search"),
+                  "data-test": "search_input"
+                  ],
+                  [ url: "#{chain_path(@conn, :token_autocomplete)}?q=",
+                  prepop: true,
+                  minChars: 3,
+                  maxItems: 8,
+                  value: "name"
+                  ]) %>
               <div class="input-group-append">
                 <button class="input-group-text" id="search-icon">
                   <%= render BlockScoutWeb.IconsView, "_search_icon.html" %>

apps/explorer/lib/explorer/chain.ex

@@ -707,7 +707,7 @@ defmodule Explorer.Chain do
 
     query =
       from(token in Token,
-        where: fragment("to_tsvector('english', name || ' ' || symbol) @@ to_tsquery(?)", ^term),
+        where: fragment("to_tsvector('english', symbol || ' ' || name ) @@ to_tsquery(?)", ^term),
         limit: 5
       )
 

apps/explorer/priv/repo/migrations/20190403080447_add_full_text_search_tokens.exs

@@ -5,7 +5,7 @@ defmodule Explorer.Repo.Migrations.AddFullTextSearchTokens do
     execute("CREATE EXTENSION pg_trgm")
 
     execute("""
-    CREATE INDEX tokens_trgm_idx ON tokens USING GIN (to_tsvector('english', name || ' ' || symbol))
+    CREATE INDEX tokens_trgm_idx ON tokens USING GIN (to_tsvector('english', symbol || ' ' || name))
     """)
   end