Implementing Twitter's new Typeahead in Rails

Rails
1

This relates to the new standalone typeahead that Twitter recently
released, not the Bootstrap version, see Twitter
Typeahead.jshttp://engineering.twitter.com/2013/02/twitter-typeaheadjs-you-autocomplete-me.html

I’m trying to integrate this into a rails app to lookup sub-categories
from
the db and I’m having trouble trying to get it to work.

I have a local version working with hard coded data that you can see
here: http://jsfiddle.net/v7dJ4/1/embedded/result/

In my rails version I get no errors in the console when I search.

Here is my JS:

$(document).ready(function() {

$(‘input.typeahead’).typeahead({

name: 'names',

prefetch: '/sub_categories/names.json',

limit: 10

});

});

If I navigate to http://jog.dev/sub_categories/names.json I get the
valid
json data so that part is working:

[[“Migrations”,“Controllers”,“Models”,“Associations”,“Views”,“Tests”]]

I think my problem is with ‘name’. In the
docs: GitHub - twitter/typeahead.js: typeahead.js is a fast and fully-featured autocomplete library it mentions that
name is the string that is used to identify the dataset. Do I need to
inject this into the json?

Any help much appreciated.

2

On Thursday, March 14, 2013 9:43:19 PM UTC-4, Anthony DeFreitas wrote:

In my rails version I get no errors in the console when I search.

I think my problem is with ‘name’. In the docs:
GitHub - twitter/typeahead.js: typeahead.js is a fast and fully-featured autocomplete library it mentions that name is
the string that is used to identify the dataset. Do I need to inject this
into the json?

Any help much appreciated.

Type ‘a’ in the js Fiddle example to see it work.

3

Ok, I made some progress. I know get results when I search but I’m
getting
the entire array instead of results just for the letter typed. Here’s my
Controller:

def names
names = []
all = SubCategory.where(“name LIKE ?”, “%#{params[:term]}%”)
all.each { |subc| names << subc.name }

render json: names

end

4

On 15 March 2013 13:19, Anthony DeFreitas [email protected]
wrote:

Ok, I made some progress. I know get results when I search but I’m getting
the entire array instead of results just for the letter typed. Here’s my
Controller:

def names
names = []

I am not sure that it is a good idea to have a variable with the same
name as the method. At the least it could be confusing.

all = SubCategory.where("name LIKE ?", "%#{params[:term]}%")

What is params[:term] set to?
If you look in the log you should be able to see the sql executed, what
is it?

Colin

5

I am not sure that it is a good idea to have a variable with the same
name as the method. At the least it could be confusing.

Yeah, not a good practice, will change it, thanks.

From the log:

Started GET “/sub_categories/names?q=a” for 127.0.0.1 at 2013-03-15
09:45:40 -0400
Processing by SubCategoriesController#names as JSON
Parameters: {“q”=>“a”}
SubCategory Load (0.5ms) SELECT “sub_categories”.* FROM
“sub_categories”
WHERE (name LIKE ‘%%’) LIMIT 10
Completed 200 OK in 3ms (Views: 0.3ms | ActiveRecord: 0.5ms)

From the Twitter documentation but I’m a little fuzzy on what to change.

wildcard - The pattern in the remote URL that will be replaced with the
user’s query when a request is made. Defaults to%QUERY.

6

Ok, getting closer. I found this
posthttp://stackoverflow.com/questions/6833281/sql-where-clause-that-begins-withwhich
says if I remove the leading ‘%’ in the query it will find entries
that ‘Begin’ with what is typed. This didn’t work for me though and my
query follows the same format:

SubCategory.where(“name like ?”, “#{params[:q]}%”)

7

Sorry for not being so precise.

Processing by SubCategoriesController#names as JSON
Parameters: {“q”=>“a”}
SubCategory Load (0.8ms) SELECT “sub_categories”.* FROM
“sub_categories”
WHERE (name LIKE ‘a%’)

8

On 15 March 2013 14:31, Anthony DeFreitas [email protected]
wrote:

Please don’t top post, it makes it difficult to follow the thread.
Insert your reply at appropriate points in previous message. Thanks.

Ok, getting closer. I found this post which says if I remove the leading ‘%’
in the query it will find entries that ‘Begin’ with what is typed. This
didn’t work for me though and my query follows the same format:

SubCategory.where(“name like ?”, “#{params[:q]}%”)

The % chars are wildcards so as you have it now it should find
anything beginning with params[:q]. You say this did not work but
have not told us what happened. We are not telepathic. Once again,
if you post the log and the query we may be able to help. I presume
you have looked at those again.

Colin

9

On 15 March 2013 14:59, Anthony at Caribbeanhotels.com
[email protected] wrote:

On Fri, Mar 15, 2013 at 10:50 AM, Colin L. [email protected] wrote:

If you had put your reply inline you would have been more likely to
answer my second question, what happens in this case? The query looks
ok.

Sorry Colin, what is your second question?

The second question was (could you not have looked back at the message
yourself?) what happens after the query, you said it does not work but
did not say what was wrong.

Colin

10

come to new land, expect everyone speak your language…

11

On 15 March 2013 15:15, Anthony at Caribbeanhotels.com
[email protected] wrote:

The second question was (could you not have looked back at the message
yourself?) what happens after the query, you said it does not work but
did not say what was wrong.

I did look back Colin but you implied that I didn’t answer your question but
I did answer it, just not to your specifications. I appreciate the help but
are all the snide comments really necessary?

So you have answered the question in some way, but have intentionally
not provided the information I asked for that I hoped would allow me
to help you? I am not sure I understand the logic of that. You still
have not told us in what way it didn’t work after you changed the
query so how anyone can help I don’t know.

Bye

Colin

12

The second question was (could you not have looked back at the message
yourself?) what happens after the query, you said it does not work but
did not say what was wrong.

I did look back Colin but you implied that I didn’t answer your question
but I did answer it, just not to your specifications. I appreciate the
help
but are all the snide comments really necessary?

http://www.caribbeanhotels.com/

13

On Friday, March 15, 2013 7:31:26 AM UTC-7, Anthony DeFreitas wrote:

Ok, getting closer. I found this
posthttp://stackoverflow.com/questions/6833281/sql-where-clause-that-begins-withwhich
says if I remove the leading ‘%’ in the query it will find entries
that ‘Begin’ with what is typed. This didn’t work for me though and my
query follows the same format:

SubCategory.where(“name like ?”, “#{params[:q]}%”)

On Friday, March 15, 2013 7:44:57 AM UTC-7, Anthony DeFreitas wrote:

Sorry for not being so precise.

Processing by SubCategoriesController#names as JSON

Parameters: {“q”=>“a”}

SubCategory Load (0.8ms) SELECT “sub_categories”.* FROM
“sub_categories” WHERE (name LIKE ‘a%’)

“Didn’t work for me” is not very descriptive. However, I’m going to
take a
wild guess and assume that your subcategory names begin with capital
letters, and your database’s LIKE is case sensitive, which would mean
you’re now getting no rows found, instead of all rows when you were
using
the wrong parameter name.

If that’s the case, then you need to make your query case insensitive.
In
PostgreSQL you could use ILIKE. I’m not sure if that’s standard,
though.
A more standard way to do make the query case insensitive would be:

SubCategory.where(“LOWER(name) like LOWER(?)”, “#{params[:q]}%”)

Or, according to a bit of googling, this would automatically do a case
insensitive query correctly for the current database:

subcats=Subcategory.arel_table
Subcategory.where(subcats[:name].matches(“%#{params[:q]}%”))

But I have not tried that mechanism myself.

Jim Crate