tag autocomplete and better browsing

app.rb

@@ -266,6 +266,10 @@ post '/tags/remove' do
   redirect request.referer
 end
 
+get '/tags/suggestions/:name.json' do |name|
+  Tag.suggestions(name).collect {|t| t.name}.to_json
+end
+
 get '/browse' do
   @current_page = params[:current_page]
   @current_page = @current_page.to_i

models/tag.rb

@@ -11,4 +11,15 @@ class Tag < Sequel::Model
   def self.create_unless_exists(name)
     dataset.filter(name: name).first || create(name: name)
   end
+
+  def self.suggestions(name, limit=3)
+    Tag.filter(name: /^#{name}/).
+    order(:name).
+    limit(limit).
+    all
+  end
+
+  def self.popular_names(limit=10)
+    DB["select tags.name,count(*) as c from sites_tags inner join tags on tags.id=sites_tags.tag_id where tags.name != '' group by tags.name having count(*) > 1 order by c desc LIMIT ?", limit].all
+  end
 end

public/assets/css/_project-sass/_project-Main.scss

@@ -772,3 +772,13 @@ a.tag:hover {
 .selected {
   font-weight: bold;
 }
+
+.modal-body {
+  max-height: 800px;
+  overflow-y: visible;
+}
+
+.tt-dropdown-menu {
+  padding: 0px 10px 0px 10px;
+  background: #FFFFFF;
+}

public/assets/css/neo.css

@@ -2009,6 +2009,14 @@ a.tag:hover {
 .selected {
   font-weight: bold; }
 
+.modal-body {
+  max-height: 800px;
+  overflow-y: visible; }
+
+.tt-dropdown-menu {
+  padding: 0px 10px 0px 10px;
+  background: #FFFFFF; }
+
 .footer-Base {
   color: #5e5b56;
   float: left;

public/assets/css/neo.min.css

@@ -841,6 +841,10 @@ a.tag:hover { text-decoration: none; background: #FFEE8A; }
 
 .selected { font-weight: bold; }
 
+.modal-body { max-height: 800px; overflow-y: visible; }
+
+.tt-dropdown-menu { padding: 0px 10px 0px 10px; background: #FFFFFF; }
+
 .footer-Base { color: #5e5b56; float: left; width: 100%; }
 .footer-Base h1, .footer-Base h2, .footer-Base h3, .footer-Base h4 { color: #8b9a7a; }
 

views/_tags.erb

@@ -29,7 +29,7 @@
         A tag can only be a single word, and can only contain letters and numbers.
       </p>
       <p>Tag:</p>
-      <input type="text" name="tags">
+      <input type="text" name="tags" class="typeahead">
     </div>
     <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>

views/browse.erb

@@ -4,7 +4,7 @@
   }
 </script>
 
-  <div class="header-Outro">
+<div class="header-Outro">
   <div class="row content">
   <% if params[:tag] %>
     <h1>Sites tagged <%= params[:tag] %>
@@ -13,9 +13,9 @@
   <% end %>
   <h3 class="subtitle"></h3>
   </div>
-  </div>
+</div>
 
-  <div class="row content">
+<div class="row content">
   <div class="col col-50">
     <form id="search_criteria" action="/browse" method="GET">
       <fieldset class="grouping">
@@ -26,6 +26,7 @@
         <div class="select-Container">
           <select name="sort_by" id="sort_by" class="input-Select">
             <option value="last_updated" <%= params[:sort_by] == 'last_updated' ? 'selected' : '' %>>Last Updated</option>
+            <option value="views" <%= params[:sort_by] == 'views' ? 'selected' : '' %>>Most Views</option>
             <option value="hits" <%= params[:sort_by] == 'hits' ? 'selected' : '' %>>Most Hits</option>
             <option value="newest" <%= params[:sort_by] == 'newest' ? 'selected' : '' %>>Newest</option>
             <option value="oldest" <%= params[:sort_by] == 'oldest' ? 'selected' : '' %>>Oldest</option>
@@ -50,14 +51,14 @@
       <a class="btn-Action" href="/new" title="create a Neocities.org site today!">Create your Neocities site now</a>
     <% end %>
   </div>
+</div> <!-- end .row.content -->
 
-    </div> <!-- end .row.content -->
 <br />
-  <% if @sites.length == 0 %>
+<% if @sites.length == 0 %>
   <div class="row content single-Col">
     <h2>No active sites found.<br>Try another search!</h2>
   </div>
-  <% else %>
+<% else %>
   <ul class="row website-Gallery content int-Gall">
     <% @sites.each do |site| %>
       <li>
@@ -84,9 +85,9 @@
       </li>
     <% end %>
   </ul>
-  <% end %>
+<% end %>
 
-  <% if params[:sort_by] != 'random' %>
+<% if params[:sort_by] != 'random' %>
   <% if @page_count > 1 %>
     <div class="txt-Center content eps">
       <% if @current_page != 1 %>
@@ -102,4 +103,24 @@
       <% end %>
     </div>
   <% end %>
+<% end %>
+
+<div class="row content">
+  <div class="col col-100">
+    <h3>
+    <% Tag.popular_names.each do |tag| %>
+      <a href="/browse?tag=<%= Rack::Utils.escape tag[:name] %>"><%= tag[:name] %></a>&nbsp;&nbsp;
     <% end %>
+    </h3>
+  </div>
+</div>
+
+<div class="row content">
+  <div class="col col-20">
+    <h4>Search by tag:</h4>
+    <form method="GET" action="browse">
+      <input class="input-Area typeahead" name="tag" placeholder="pokemon">
+      <input type="submit" class="btn-Action" value="Search" style="width: 100px">
+    </form>
+  </div>
+</div>

views/layout.erb

@@ -54,11 +54,31 @@
     <script src="/assets/scripts/underscore-min.js"></script>
     <script src="/assets/scripts/nav.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/typeahead.bundle.js"></script>
 
     <script>
       $("a#like").tooltip({html: true})
       $("a.comment_like").tooltip({html: true})
       $('#shareButton').popover({html: true})
+
+      $('.typeahead').typeahead({
+        minLength: 3,
+        highlight: true
+      }, {
+        name: 'tags',
+        source: function(query, callback) {
+          $.get('/tags/suggestions/'+query+'.json', function(data) {
+            console.log(data)
+
+            var suggestions = JSON.parse(data)
+            var suggestionObjects = []
+            for(var i=0; i<suggestions.length; i++)
+              suggestionObjects.push({value: suggestions[i]})
+
+            callback(suggestionObjects)
+          })
+        }
+      })
     </script>
   </body>
 </html>