Implementing Twitter's new Typeahead in Rails

951 views
Skip to first unread message

Anthony DeFreitas

unread,
Mar 14, 2013, 9:43:19 PM3/14/13
to rubyonra...@googlegroups.com

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.



Anthony DeFreitas

unread,
Mar 14, 2013, 9:48:05 PM3/14/13
to rubyonra...@googlegroups.com
Type 'a' in the js Fiddle example to see it work. 

Anthony DeFreitas

unread,
Mar 15, 2013, 9:19:13 AM3/15/13
to rubyonra...@googlegroups.com
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

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

Colin Law

unread,
Mar 15, 2013, 9:43:17 AM3/15/13
to rubyonra...@googlegroups.com
On 15 March 2013 13:19, Anthony DeFreitas <ant...@caribbeanhotels.com> 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
> --
> You received this message because you are subscribed to the Google Groups
> "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/rubyonrails-talk/-/2adxA4EBklQJ.
>
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

Anthony DeFreitas

unread,
Mar 15, 2013, 9:51:35 AM3/15/13
to rubyonra...@googlegroups.com, cla...@googlemail.com
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.

Anthony DeFreitas

unread,
Mar 15, 2013, 10:31:26 AM3/15/13
to rubyonra...@googlegroups.com, cla...@googlemail.com
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]}%")

Colin Law

unread,
Mar 15, 2013, 10:40:18 AM3/15/13
to Anthony DeFreitas, rubyonra...@googlegroups.com
On 15 March 2013 14:31, Anthony DeFreitas <ant...@caribbeanhotels.com> 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

Anthony DeFreitas

unread,
Mar 15, 2013, 10:44:57 AM3/15/13
to rubyonra...@googlegroups.com, Anthony DeFreitas, cla...@googlemail.com
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%')

Colin Law

unread,
Mar 15, 2013, 11:06:11 AM3/15/13
to rubyonra...@googlegroups.com
On 15 March 2013 14:59, Anthony at Caribbeanhotels.com
<ant...@caribbeanhotels.com> wrote:
>
> On Fri, Mar 15, 2013 at 10:50 AM, Colin Law <cla...@googlemail.com> 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

Anthony at Caribbeanhotels.com

unread,
Mar 15, 2013, 11:15:08 AM3/15/13
to rubyonra...@googlegroups.com

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? 


tamouse mailing lists

unread,
Mar 15, 2013, 11:25:20 AM3/15/13
to rubyonra...@googlegroups.com
come to new land, expect everyone speak your language...

Colin Law

unread,
Mar 15, 2013, 3:01:01 PM3/15/13
to rubyonra...@googlegroups.com
On 15 March 2013 15:15, Anthony at Caribbeanhotels.com
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

>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
>

Jim

unread,
Mar 16, 2013, 6:09:02 PM3/16/13
to rubyonra...@googlegroups.com, cla...@googlemail.com

On Friday, March 15, 2013 7:31:26 AM UTC-7, Anthony DeFreitas wrote:
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]}%")


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

Reply all
Reply to author
Forward
0 new messages