Auto-Completion

app.rb

@@ -1,6 +1,13 @@
-# Requirements
+# Monkey patching for fun and profit
+module UR
+  class Search
+    SEARCH_SERVICE_URL = 'http://localhost:8080/search'
+  end
+end
 
+# Requirements
 require 'sinatra'
+require 'enumerator'
 require 'lib/ur_helpers'
 require 'ur-product'
 
@@ -40,7 +47,7 @@
 
   search_result = UR::Product.search(search_params)
 
-  haml :index, :locals => { 
+  haml :index, :locals => {
     :page_title => 'UR Produktsök',
     :current_page => current_page,
     :search => search_result,
@@ -53,7 +60,18 @@
       ['sli_entry', 'SLI-kod']
     ]
   }
+end
+
+post '/autocomplete.json' do
+  content_type :json
+  term = URI.escape(params[:value])
+  url = UR::Search::SEARCH_SERVICE_URL + 
+        "/terms?wt=json&terms.fl=search_ao&terms.prefix=#{term}"
+  response = JSON.parse(RestClient.get(url).body)
 
+  response['terms'][1].each_slice(2).each.map { |t|
+    { :value => t[0], :display => t[0] }
+  }.to_json
 end
 
 get '/stylesheets/style.css' do

lib/ur_helpers.rb

@@ -33,7 +33,8 @@ def facet_link(name, facet)
         link = link.gsub('fq=', "fq=#{name}:\"#{facet.value}\" ").
                     gsub(/page\=\d+/, "page=1").sub(' &', '&')
       else
-        link = "#{link}&fq=#{name}:\"#{facet.value}\"".gsub(/page\=\d+/, "page=1")
+        link += '&' if link != '/?'
+        link = "#{link}fq=#{name}:\"#{facet.value}\"".gsub(/page\=\d+/, "page=1")
       end
 
       link

public/javascripts/application.js

@@ -5,5 +5,9 @@ $(document).ready(function() {
     $(this).parent().addClass('hidden');
   });
 
-  $('div.num_found').delay(5000).fadeOut();
+  $('input[name=q]').autoComplete({
+    ajax: '/autocomplete.json', 
+    minChars: 3,
+    preventEnterSubmit: false
+  });
 });

views/index.haml

@@ -19,7 +19,7 @@
               %div.grid-2.alpha
                 %img{ :src => product.image_url(1, '_t'), :width => 128 }
               %div.grid-6.omega
-                %h2
+                %h4
                   %a{ :href => "/#{product.ur_product_id}" }= product.title
                 %strong
                   = translated_product_type("#{product.product_type}#{product.product_sub_type}")
@@ -32,13 +32,15 @@
       - else
         %div.products
           %div.no_products
-            %h2= "Välkommen till produktsöket…" 
+            %h2= "Välkommen till produktsöket"
     %div.grid-4
       %div.sidebar
+        %h3
+          ="Filtrera träffar"
         - facet_order.each do |facet_name, facet_title|
           - if !search.facets[facet_name].nil? && search.facets[facet_name].size > 0
             %div.facet{ :class => facet_name }
-              %h2=facet_title
+              %h4=facet_title
               %ul
                 - search.facets[facet_name][0...5].each do |facet|
                   %li

views/layout.haml

@@ -5,6 +5,7 @@
     %link{ :rel => "shortcut icon", :href => "/favicon.ico", :type => "image/x-icon" }
     %link{ :rel => "stylesheet", :href => "/stylesheets/style.css", :type => "text/css" }
     %script{ :src => "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" }
+    %script{ :src => "/javascripts/jquery.auto-complete.min.js" }
     %script{ :src => "/javascripts/application.js" }
     %title= page_title
   %body

views/style.sass

@@ -54,6 +54,18 @@ h1
   a
     color: #000
 
+h2
+  font-size: 2.2em
+
+h3
+  font-size: 1.8em
+
+h2, h3
+  margin-bottom: 0.2em
+  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Calibri,"Lucida Sans Unicode",Arial,Helvetica,FreeSans,"Nimbus Sans L",sans-serif
+  font-weight: 300
+  padding-top: 0
+
 ul
   list-style: none
   margin: 0
@@ -68,7 +80,7 @@ body
     ul
       margin-bottom: 1.5em
 
-    h2
+    h4
       margin-bottom: 0.3em
 
     li
@@ -106,8 +118,8 @@ body
           text-align: center
           img
             margin: 0.45em 0 1em 1em
-        h2
-          font-size: 1.3em
+        h4
+          font-size: 1.1em
           margin-bottom: 0
 
         strong
@@ -166,4 +178,29 @@ div.num_found
 
 .remove_facet_filter
   font-size: 1.2em
-  line-height: 0.7em
+  line-height: 0.7em
+
+ul.auto-complete-list
+  +box-shadow(2px, 2px, 4px, rgba(122,129,136,1))
+  list-style-type: none
+  margin: 0
+  margin-top: -1px
+  padding: 0
+  position: absolute
+  z-index: 100
+  max-height: 250px
+  overflow: auto
+  li
+    list-style-type: none
+    margin: 0
+    padding: 2px
+    background-color: #fff
+    border-bottom: 1px solid #eee
+    border-right: 1px solid #7a8188
+    border-left: 1px solid #ccc
+    cursor: pointer
+  .auto-complete-list-rollover
+    background-color= !ur_pink
+    color: #fff
+  .auto-complete-striped
+    background-color: #D7EEF9