Updated autocomplete to include instant search

Andrew Kane
1 parent 33825cfb
Showing 1 changed file with 14 additions and 9 deletions Show diff stats
README.md
@@ -488,7 +488,7 @@ Reindex and search with:
 Product.search "milk", boost_where: {orderer_ids: current_user.id}
 ```
  
-### Autocomplete
+### Instant Search / Autocomplete
  
 Autocomplete predicts what a user will type, making the search experience faster and easier.
  
@@ -499,15 +499,15 @@ Autocomplete predicts what a user will type, making the search experience faster
 First, specify which fields use this feature.  This is necessary since autocomplete can increase the index size significantly, but don’t worry - this gives you blazing faster queries.
  
 ```ruby
-class City < ActiveRecord::Base
-  searchkick match: :word_start
+class Book < ActiveRecord::Base
+  searchkick match: :word_start, searchable: [:title, :author]
 end
 ```
  
 Reindex and search with:
  
 ```ruby
-City.search "san fr", fields: [:name]
+Book.search "tipping poi"
 ```
  
 Typically, you want to use a JavaScript library like [typeahead.js](http://twitter.github.io/typeahead.js/) or [jQuery UI](http://jqueryui.com/autocomplete/).
@@ -517,10 +517,15 @@ Typically, you want to use a JavaScript library like [typeahead.js](http://twitt
 First, add a route and controller action.
  
 ```ruby
-# app/controllers/cities_controller.rb
-class CitiesController < ApplicationController
+# app/controllers/books_controller.rb
+class BooksController < ApplicationController
   def autocomplete
-    render json: City.search(params[:query], fields: [:name], limit: 10).map(&:name)
+    render json: Book.search(params[:query], {
+      fields: ["title^5", "author"],
+      limit: 10,
+      load: false,
+      misspellings: {below: 5}
+    }).map(&:name)
   end
 end
 ```
@@ -534,8 +539,8 @@ Then add the search box and JavaScript code to a view.
 <script src="typeahead.js"></script>
 <script>
   $("#query").typeahead({
-    name: "city",
-    remote: "/cities/autocomplete?query=%QUERY"
+    name: "book",
+    remote: "/books/autocomplete?query=%QUERY"
   });
 </script>
 ```
...	...	@@ -488,7 +488,7 @@ Reindex and search with:
488	488	Product.search "milk", boost_where: {orderer_ids: current_user.id}
489	489	```
490	490
491		-### Autocomplete
	491	+### Instant Search / Autocomplete
492	492
493	493	Autocomplete predicts what a user will type, making the search experience faster and easier.
494	494
...	...	@@ -499,15 +499,15 @@ Autocomplete predicts what a user will type, making the search experience faster
499	499	First, specify which fields use this feature. This is necessary since autocomplete can increase the index size significantly, but don’t worry - this gives you blazing faster queries.
500	500
501	501	```ruby
502		-class City < ActiveRecord::Base
503		- searchkick match: :word_start
	502	+class Book < ActiveRecord::Base
	503	+ searchkick match: :word_start, searchable: [:title, :author]
504	504	end
505	505	```
506	506
507	507	Reindex and search with:
508	508
509	509	```ruby
510		-City.search "san fr", fields: [:name]
	510	+Book.search "tipping poi"
511	511	```
512	512
513	513	Typically, you want to use a JavaScript library like [typeahead.js](http://twitter.github.io/typeahead.js/) or [jQuery UI](http://jqueryui.com/autocomplete/).
...	...	@@ -517,10 +517,15 @@ Typically, you want to use a JavaScript library like [typeahead.js](http://twitt
517	517	First, add a route and controller action.
518	518
519	519	```ruby
520		-# app/controllers/cities_controller.rb
521		-class CitiesController < ApplicationController
	520	+# app/controllers/books_controller.rb
	521	+class BooksController < ApplicationController
522	522	def autocomplete
523		- render json: City.search(params[:query], fields: [:name], limit: 10).map(&:name)
	523	+ render json: Book.search(params[:query], {
	524	+ fields: ["title^5", "author"],
	525	+ limit: 10,
	526	+ load: false,
	527	+ misspellings: {below: 5}
	528	+ }).map(&:name)
524	529	end
525	530	end
526	531	```
...	...	@@ -534,8 +539,8 @@ Then add the search box and JavaScript code to a view.
534	539	<script src="typeahead.js"></script>
535	540	<script>
536	541	$("#query").typeahead({
537		- name: "city",
538		- remote: "/cities/autocomplete?query=%QUERY"
	542	+ name: "book",
	543	+ remote: "/books/autocomplete?query=%QUERY"
539	544	});
540	545	</script>
541	546	```
...	...