Implementing Twitter's new Typeahead in Rails

This relates to the new standalone typeahead that Twitter recently released, not the Bootstrap version, see Twitter Typeahead.js

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: https://github.com/twitter/typeahead.js#datasets 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.

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

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

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.

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]}%”)

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

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%’)

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

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/>

come to new land, expect everyone speak your language...

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

“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