Implementing Twitter's new Typeahead in Rails

rubyonrails-talk
1

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

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

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

7

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

8

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

9

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

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/&gt;

11

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

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?

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

13

“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