search autocomplete

app/controllers/artist_controller.rb

@@ -9,5 +9,20 @@ class ArtistController < ApplicationController
 	  	end
 	  	@artist = Artist.getByName(name)
 	end
+
+	def autocomplete
+		autocomplete = Artist.getLastFmAutocomplete(params[:query])
+		return	render :nothing => true if autocomplete.nil?
+		suggestions = []
+		pp autocomplete["response"]
+    	autocomplete["response"]["docs"].each do |doc|
+    		suggestions << doc["artist"] unless suggestions.include?(doc["artist"])
+    	end
+
+		render :json => {
+			:query => params[:query],
+			:suggestions => suggestions
+		}
+	end
 end
 

app/models/artist.rb

@@ -1,8 +1,19 @@
 class Artist < ActiveRecord::Base
 	set_table_name 'musicbrainz.bh_artist'
 	has_many :albums, :conditions => "release_type = 1", :order => 'year ASC, id ASC'
-	
+
 	def self.getByName(name)
 		Artist.first(:conditions => ['name = ? AND id=credit_id', name], :order => 'rating DESC')
 	end
+
+	def self.getLastFmAutocomplete(query)
+		return nil if query.nil? or query.strip.empty?
+
+		json = ActiveSupport::JSON.decode(open(
+		    'http://www.last.fm/search/autocomplete' <<
+		    '?q=' << URI.escape(query)
+    	).read)
+    	return nil if json.empty? else return json
+	end
 end
+

app/views/main/index.html.erb

@@ -1,3 +1,17 @@
+<script type="text/javascript">
+	jQuery(function(){
+	  var ac = $('#name').autocomplete({
+			serviceUrl: 'search/autocomplete', // Страница для обработки запросов автозаполнения
+			minChars: 2, // Минимальная длина запроса для срабатывания автозаполнения
+			delimiter: /(,|;)\s*/, // Разделитель для нескольких запросов, символ или регулярное выражение
+			maxHeight: 400, // Максимальная высота списка подсказок, в пикселях
+			width: 300, // Ширина списка
+			zIndex: 9999, // z-index списка
+			deferRequestBy: 150, // Задержка запроса (мсек)
+		});
+	});
+</script>
+
 <div class="search">
 <h1>SEARCH</h1>
 <%= form_tag('/artist', :method => 'post') %>

config/routes.rb

@@ -59,6 +59,7 @@ Beathaven::Application.routes.draw do
   # Note: This route will make all actions in every controller accessible via GET requests.
   # match ':controller(/:action(/:id(.:format)))'
   match 'artist(/:name)' => 'artist#view'
-  match 'listen/:id' => 'track#listen'
+  match 'listen/:id'     => 'track#listen'
+  match 'search/autocomplete' => 'artist#autocomplete'
 end
 

public/stylesheets/beathaven.css

@@ -110,6 +110,7 @@ body {
 }
 
 .search #name {
+	width: 300px;
 	border: 1px solid ##bdbdbd;
 	background: #555555;
 	color: #ffffff;

public/stylesheets/search-autocomplete.css

@@ -1,6 +1,7 @@
 
-.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; }
+.autocomplete-w1 { background:url(../images/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; }
 .autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
 .autocomplete .selected { background:#F0F0F0; }
 .autocomplete div { padding:2px 5px; white-space:nowrap; }
 .autocomplete strong { font-weight:normal; color:#3399FF; }
+