Make the tag autocomplete on the getting started page less broken

app/controllers/tags_controller.rb

@@ -13,22 +13,27 @@ class TagsController < ApplicationController
   respond_to :json, :only => [:index]
 
   def index
-    if params[:q] && params[:q].length > 1
+    if params[:q] && params[:q].length > 1 && request.format.json?
       params[:q].gsub!("#", "")
       params[:limit] = !params[:limit].blank? ? params[:limit].to_i : 10
       @tags = ActsAsTaggableOn::Tag.named_like(params[:q]).limit(params[:limit] - 1)
-      @array = []
-      @tags.each do |obj|
-        @array << { :name => ("#"+obj.name),
-          :value => ("#"+obj.name)}
+      @tags.map! do |obj|
+        { :name => ("#"+obj.name),
+          :value => ("#"+obj.name),
+          :url => tag_path(obj.name)
+        }
       end
 
-      @array << { :name => ('#' + params[:q]), :value => ("#" + params[:q])}
-      @array.uniq!
+      @tags << {
+        :name => ('#' + params[:q]),
+        :value => ("#" + params[:q]),
+        :url => tag_path(params[:q].downcase)
+      }
+      @tags.uniq!
 
       respond_to do |format|
         format.json{
-          render(:json => @array.to_json, :status => 200)
+          render(:json => @tags.to_json, :status => 200)
         }
       end
     else

app/views/layouts/_header.html.haml

@@ -18,7 +18,7 @@
 
   - elsif (current_user || !@landing_page)
     #global_search
-      = form_tag(people_path, :method => 'get', :id => "global_search_form") do
+      = form_tag(people_path, :method => 'get', :class => "search_form") do
         = text_field_tag 'q', nil, :placeholder => t('find_people'), :type => 'search', :results => 5
 
     - if @notification_count
@@ -68,10 +68,10 @@
           = link_to "[x] close", '#', :id => 'lightbox-close-link'
           %img#lightbox-image
           #lightbox-imageset
-            
+
 
       #lightbox-backdrop
-        
+
     %ul#user_menu.dropdown
       %li
         .right

app/views/users/getting_started.haml

@@ -105,9 +105,8 @@
             %h4
               = t('.find_friends')
             .span-5.append-1
-              #global_search
-                = form_tag(people_path, :method => 'get', :id => "global_search_form") do
-                  = text_field_tag 'q', nil, :placeholder => "Search for people", :type => 'search', :results => 5
+              = form_tag(people_path, :method => 'get', :class => "search_form") do
+                = text_field_tag 'q', nil, :placeholder => "Search for people", :type => 'search', :results => 5
             .span-5.last{:style => "height:30px;"}
               %h4{:style => "margin-top:7px;"}
                 or
@@ -127,9 +126,8 @@
             = t('.hashtag_explanation')
 
           .span-5.append-1
-            #global_search
-              = form_tag(people_path, :method => 'get', :id => "global_search_form") do
-                = text_field_tag 'q', nil, :placeholder => "Search for #hashtags", :type => 'search', :results => 5
+            = form_tag(tags_path, :method => 'get', :class => "search_form") do
+              = text_field_tag 'q', nil, :placeholder => "Search for #hashtags", :type => 'search', :results => 5
           .span-5.last
             %h4{:style => "margin-top:7px;"}
               = t('.featured_tags')

public/javascripts/search.js

@@ -1,10 +1,9 @@
 var Search = {
-  source : '/people.json',
-
-  selector : '#global_search input#q',
+  selector : '.search_form input[type="search"]',
   formatItem: function(row){
     if(row['search']) {
-      return $.mustache(Diaspora.widgets.i18n.t('search_for'), { name: row['name'] });
+      var data = { name: this.element.val() }
+      return Diaspora.widgets.i18n.t('search_for', data);
     } else {
       return "<img src='"+ row['avatar'] +"' class='avatar'/>" + row['name'];
     }
@@ -16,18 +15,19 @@ var Search = {
     results =  data.map(function(person){
       return {data : person, value : person['name']}
     });
-    results.push(Search.searchLinkli());
+    results.push(Search.searchLinkli.apply(this));
     return results;
   },
-  selectItemCallback :  function(event, data, formatted) {
-    if (data['id'] !== undefined) { // actual result
-      $(Search.selector).val(formatted);
+  selectItemCallback :  function(element, data, formatted) {
+    if (data['search'] === true) { // The placeholder "search for" result
+      window.location = this.element.parents("form").attr("action") + '?' + this.element.attr("name") +'=' + data['name'];
+    } else { // The actual result
+      element.val(formatted);
       window.location = data['url'];
-    } else { //use form val to eliminate timing issue
-      window.location = '/people?q='+$(Search.selector).val();
     }
   },
-  options : function(){return {
+  options : function(element){return {
+      element: element,
       minChars : 2,
       onSelect: Search.selectItemCallback,
       max : 5,
@@ -41,11 +41,14 @@ var Search = {
   };},
 
   searchLinkli : function() {
-    var searchTerm = $(Search.selector).val();
+    var searchTerm = this.element.val();
+    if(searchTerm[0] === "#"){
+      searchTerm = searchTerm.slice(1);
+    }
     return {
       data : {
         'search' : true,
-        'url' : '/people?q=' + searchTerm,
+        'url' : this.element.parents("form").attr("action") + '?' + this.element.attr("name") +'=' + searchTerm,
         'name' : searchTerm
       },
       value : searchTerm
@@ -53,7 +56,11 @@ var Search = {
   },
 
   initialize : function() {
-    $(Search.selector).autocomplete(Search.source, Search.options());
+    $(Search.selector).each(function(index, element){
+      var $element = $(element);
+      var action = $element.parents("form").attr("action") + '.json';
+      $element.autocomplete(action, Search.options($element));
+    });
   }
 }