[search-improvements] Allows more than one search input per page

Some users have a profile search block in their pages, so sometimes there are more than one search input per page. I changed the autocomplete to use class instead of id to select all inputs.

[search-improvements] Allows more than one search input per page
Some users have a profile search block in their pages, so sometimes there are more than one search input per page. I changed the autocomplete to use class instead of id to select all inputs.
Larissa Reis
1 parent 9cf96ec9
Showing 4 changed files with 6 additions and 6 deletions Show diff stats
app/helpers/application_helper.rb
app/views/search/_search_form.html.erb
public/javascripts/application.js
public/javascripts/search.js
@@ -1419,7 +1419,7 @@ module ApplicationHelper
   end
   def search_input_with_suggestions(name, asset, default, options = {})
-    text_field_tag name, default, options.merge({:id => 'search-input', 'data-asset' => asset})
+    text_field_tag name, default, options.merge({:class => 'search-input-with-suggestions', 'data-asset' => asset})
   end
   def profile_suggestion_profile_connections(suggestion)
@@ -9,7 +9,7 @@
     <div class="search-field">
       <span class="formfield">
-        <%= search_input_with_suggestions('query', @asset, @query, {:size => 50, :placeholder => hint}) %>
+        <%= search_input_with_suggestions('query', @asset, @query, {:id => 'search-input', :size => 50, :placeholder => hint}) %>
       </span>
       <%= submit_button(:search, _('Search')) %>
@@ -1090,7 +1090,7 @@ jQuery(document).ready(function(){
   // Suggestions on search inputs
   (function($) {
     var suggestions_cache = {};
-    $("#search-input").autocomplete({
+    $(".search-input-with-suggestions").autocomplete({
       minLength: 2,
       select: function(event, ui){
         $(this).val(ui.item.value);
@@ -1102,7 +1102,7 @@ jQuery(document).ready(function(){
           response(suggestions_cache[term]);
           return;
         }
-        request["asset"] = $("#search-input").data("asset");
+        request["asset"] = this.element.data("asset");
         $.getJSON("/search/suggestions", request, function(data, status, xhr) {
           suggestions_cache[term] = data;
           response(data);
@@ -37,12 +37,12 @@
   });
   // Real time search
-  // $("input#search-input").typeWatch({
+  // $(".search-input-with-suggestions").typeWatch({
   //   callback: function (value) {$('form.search_form').submit()},
   //   wait: 750,
   //   highlight: true,
   //   captureLength: 2
   // });
-  $("input#search-input").bind('notext', function(){ $('form.search_form').submit() });
+  $(".search-input-with-suggestions").bind('notext', function(){ $('form.search_form').submit() });
 })(jQuery);
	@@ -1419,7 +1419,7 @@ module ApplicationHelper		@@ -1419,7 +1419,7 @@ module ApplicationHelper
1419	end	1419	end
1420		1420
1421	def search_input_with_suggestions(name, asset, default, options = {})	1421	def search_input_with_suggestions(name, asset, default, options = {})
1422	- text_field_tag name, default, options.merge({:id => 'search-input', 'data-asset' => asset})	1422	+ text_field_tag name, default, options.merge({:class => 'search-input-with-suggestions', 'data-asset' => asset})
1423	end	1423	end
1424		1424
1425	def profile_suggestion_profile_connections(suggestion)	1425	def profile_suggestion_profile_connections(suggestion)
	@@ -9,7 +9,7 @@		@@ -9,7 +9,7 @@
9		9
10	<div class="search-field">	10	<div class="search-field">
11	<span class="formfield">	11	<span class="formfield">
12	- <%= search_input_with_suggestions('query', @asset, @query, {:size => 50, :placeholder => hint}) %>	12	+ <%= search_input_with_suggestions('query', @asset, @query, {:id => 'search-input', :size => 50, :placeholder => hint}) %>
13	</span>	13	</span>
14		14
15	<%= submit_button(:search, _('Search')) %>	15	<%= submit_button(:search, _('Search')) %>
	@@ -1090,7 +1090,7 @@ jQuery(document).ready(function(){		@@ -1090,7 +1090,7 @@ jQuery(document).ready(function(){
1090	// Suggestions on search inputs	1090	// Suggestions on search inputs
1091	(function($) {	1091	(function($) {
1092	var suggestions_cache = {};	1092	var suggestions_cache = {};
1093	- $("#search-input").autocomplete({	1093	+ $(".search-input-with-suggestions").autocomplete({
1094	minLength: 2,	1094	minLength: 2,
1095	select: function(event, ui){	1095	select: function(event, ui){
1096	$(this).val(ui.item.value);	1096	$(this).val(ui.item.value);
	@@ -1102,7 +1102,7 @@ jQuery(document).ready(function(){		@@ -1102,7 +1102,7 @@ jQuery(document).ready(function(){
1102	response(suggestions_cache[term]);	1102	response(suggestions_cache[term]);
1103	return;	1103	return;
1104	}	1104	}
1105	- request["asset"] = $("#search-input").data("asset");	1105	+ request["asset"] = this.element.data("asset");
1106	$.getJSON("/search/suggestions", request, function(data, status, xhr) {	1106	$.getJSON("/search/suggestions", request, function(data, status, xhr) {
1107	suggestions_cache[term] = data;	1107	suggestions_cache[term] = data;
1108	response(data);	1108	response(data);
	@@ -37,12 +37,12 @@		@@ -37,12 +37,12 @@
37	});	37	});
38		38
39	// Real time search	39	// Real time search
40	- // $("input#search-input").typeWatch({	40	+ // $(".search-input-with-suggestions").typeWatch({
41	// callback: function (value) {$('form.search_form').submit()},	41	// callback: function (value) {$('form.search_form').submit()},
42	// wait: 750,	42	// wait: 750,
43	// highlight: true,	43	// highlight: true,
44	// captureLength: 2	44	// captureLength: 2
45	// });	45	// });
46		46
47	- $("input#search-input").bind('notext', function(){ $('form.search_form').submit() });	47	+ $(".search-input-with-suggestions").bind('notext', function(){ $('form.search_form').submit() });
48	})(jQuery);	48	})(jQuery);