04 June 2008

Rails, jQuery, auto-complete, and a New Plugin

Update: I've switched which jQuery autocomplete plugin I use for this, see my newer blog entry.

The other day, I made a whole switch from Prototype & Scriptaculous to jQuery. I've had the bug to do this for a while, and this is a new project, so I went for it. I don't have anything against Prototype, so my main impetus for this was a move towards Unobtrusive JavaScript, and also the speed aspect (the site I'm currently working on, if things go accordingly to plan, will do some pretty serious traffic). But, the unobtrusive JavaScript was the key, and really, my switch is more of a philosophy of approach rather than say a dislike for Prototype, etc. And, of course, it's something new to play with :)

Before I go any further, I'll state right now, I am not a JavaScript expert, and I've been using jQuery now for all of a couple hours.

One of the results of my switch however, was that I hacked DHH's auto_complete Rails plugin, to work for jQuery. Simple change. I tweaked the controller macro, and then gutted the JS helpers, as you just don't need those when using jQuery in this way. It does require the jquery-autocomplete plugin for jQuery. I've published my Rails plugin for this on GitHub as auto_complete_jquery.

Circling back around, here's what I did to get all this going. I did run into one issue (see step 10 below) that I'm still tracking down (easy solution in the interim, but I'd like to understand what's happening, so if you have comments, please let me know):


  1. Removed the Prototype and Scriptaculous JS files from the public/javascripts dir of my Rails app. You don't have to do this, but I am no longer using them, so saw no need to keep them there, and it helps ensure I don't mistakenly use something from them or include them in the view. This includes: prototype.js, controls.js, dragdrop.js, and effects.js.

  2. Removed the prototype-based Rails auto_complete plugin from vendor/plugins.

  3. Installed the latest minified jQuery file in public/javascripts/jquery.

  4. Installed the JS files for the jquery-autocomplete plugin, and its dependencies: jquery.templating.js, and jquery.ui.autocomplete.js. (see the jquery-autocomplete plugin for these files).

  5. Added the jquery.ui.autocomplete.css file to public/stylesheets.

  6. Installed my auto_complete_jquery plugin.

  7. Put the proper includes for the CSS file and the JS files in my application layout file:


    <%= stylesheet_link_tag 'jquery.ui.autocomplete' %>
    <%= javascript_include_tag 'jquery/jquery.min', 'jquery/jquery.templating', 'jquery/jquery.ui.autocomplete.ext', 'jquery/jquery.ui.autocomplete', :cache => 'jquery' %>

    Note that I keep my jQuery JS files in a subdir for organizational purposes, but you can modify as needed.

  8. Changed my existing auto-complete text fields that used the Rails Prototype based auto_complete plugin's helpers to just be plain old text fields, such as:
    <%= coffee.text_field :drink, :autocomplete =>"off" %>
    This is doing an auto-complete for the "drink" attribute of the Coffee model.

  9. I can simply leave any auto_complete_for calls that existed in my controller, as that works the same. If you had custom versions that were based on the code from the Prototype-based Rails plugin, just go look at the code in my plugin to see the differences, it's a simple change.

  10. Add the JavaScript that sets up the auto-complete for the given text field. This will typically look like:

    $(document).ready(function() {
    $("input#coffee_drink").autocomplete({ ajax: "auto_complete_for_coffee_drink" })
    });

    Where does this go? It depends. What I've been liking is using the JavaScript auto-include plugin, which creates a Rails-style convention for JavaScript files that pertain to individual actions, or are controller-wide. So in my case, this code would get placed in public/javascripts/views/coffees/new.js, or likely one directory up, as simply coffees.js (so that I can use it in any CoffeesController action that needs to auto-complete on coffee.drink. Without that plugin, you just put it in whatever JS file is appropriately included for the view you're using it in, etc. You can of course put it directly into the view in a script block, but then you aren't doing the whole Unobtrusive JavaScript thing as rigidly.
  11. Finally, what I found is that I had to add a route for this. This is the issue I mentioned above. It sort of makes sense, but what I'm unclear on is, why the prior standard/Prototype-based Rails auto_complete plugin didn't require a route. They both seem to use a GET, define the action the same way, and so on. I'm hoping I'm just missing something obvious. So, the route I added is:
    map.connect ':controller/auto_complete_for_coffee_drink', :action => 'auto_complete_for_coffee_drink', :format => 'json'



A bunch of steps, but pretty simple work. The app I'm doing this on is all of a few days old, so I hadn't gotten into use of much else in Prototype and so on, thus making the wholesale switch easy.

If you'd like to learn more about any of these things, and as a comprehensive set of links:


Enjoy!

Update: I removed the jQuery Dimensions JS file and include for it in my layout, as this is now included in the latest jQuery JS file itself.

Update 2: I don't know how the standard auto_complete plugin manages to do without routes, but here is a generic route for all auto-complete actions across controllers:

map.auto_complete ':controller/:action',
:requirements => { :action => /auto_complete_for_\S+/ },
:conditions => { :method => :get }

I hesitate to put this into the plugin, as routes can be quite tricky in more complex apps, and I wouldn't want to auto-hose someone :)

21 comments:

JHill said...

Great idea... It doesn't look like all the files made it to github, though :)

Chris said...

jhill, Thanks! Not sure what happened there, but they're all there now, so try again.

JHill said...

Awesome, thanks!

Chris said...

I updated this entry to provide a single route definition that covers all auto_complete methods (see the end of the post).

dubbon said...

i have newbies question

i used latest jquery.js (1.2.6) i upload jquery.ui.autocomplete.js and others .
I put the files in http://sismit.securigo.com/
but i have problem with the auto-complete and how to install the RB files.
Thanks for the post

Chris said...

Dubbon, do you have a Ruby on Rails project? If so, you put all the JavaScripts into [your project dir]/public/javascript (or a subdirectory of that as I mentioned I do).

For my plugin, you can install it various ways. It's a regular Rails plugin, so you can git clone it into your plugins directory, or you can use a Git submodule if your own project is managed under Git. Finally, you can also just download it from GitHub, and extract it into your Rails app's plugins directory.

james said...

Have you had any issues like "this.match is not a function" when using this jQuery plugin?

Chris said...

James, I haven't seen that. I take it you are seeing it? Where is "this.match" being called?

CLR said...

On line 126 of jquery.ui.autocmplete.js, I had to change "opt.match.call( this, ...)" to "opt.match.call( this.text, ...)" to match the "text": structure of my JSON object being returned. This is in FF3 on Linux, version 1.0 of that file. I'm not sure why this evaluated correctly for you, but then I also had to modify the list builder because I was just getting li[object Object]/li until I also add ".text" to line 128.

Jay said...

I am also getting "this.match is not a function" on line 93 of jquery.ui.autocomplete.js. Using:

Firefox 2.0.0.15
jQuery 1.2.6

Thanks

Tim said...

I have this working in a rails project alongside jrails and for some reason I only get a single query out of it... after the first list is returned it does not do any more ajax calls.

Any ideas?

godfox said...

I am also getting "this.match is not a function" on line 108 of jquery.ui.autocomplete.js
=>"match: function(typed) { return this.match(new RegExp(typed)); }," and that js files downloaded from "http://github.com/ReinH/jquery-autocomplete/tree/master"

rails 2.1
firefox 3
netbeans6.1

Willys said...

Kia

Finance said...

You can remove the 'match' option and let the autocomplete plugin use the default.... then u wont get that error.

Thats what i did on here: Finance news

volvo auto parts said...

Hey guys!
i just started blogging not that long ago and running across this blog it seemed a bit too interesting to only read the first paragraph. I kinda got confused in the middle of it but the end just made it all go together like a puzzle. Please, who ever wrote this, keep me updated!

Anonymous said...

Hi,
i was trying to follow this whith usuall scaffold coffee with atribute drink.
I wanted to display this autocomplete field in the view index, and i got erorr
undefined local variable or method `coffee'

thx for help

情趣用品 said...

情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣用品,情趣,情趣,情趣,情趣,情趣,情趣,情趣,情趣,按摩棒,跳蛋,充氣娃娃,情境坊歡愉用品,情趣用品,情人節禮物,情惑用品性易購

免費A片,AV女優,美女視訊,情色交友,免費AV,色情網站,辣妹視訊,美女交友,色情影片,成人影片,成人網站,A片,H漫,18成人,成人圖片,成人漫畫,情色網,日本A片,免費A片下載,性愛

A片,色情,成人,做愛,情色文學,A片下載,色情遊戲,色情影片,色情聊天室,情色電影,免費視訊,免費視訊聊天,免費視訊聊天室,一葉情貼圖片區,情色,情色視訊,免費成人影片,視訊交友,視訊聊天,視訊聊天室,言情小說,愛情小說,AIO,AV片,A漫,av dvd,聊天室,自拍,情色論壇,視訊美女,AV成人網,色情A片,SEX

情趣用品,A片,免費A片,AV女優,美女視訊,情色交友,色情網站,免費AV,辣妹視訊,美女交友,色情影片,成人網站,H漫,18成人,成人圖片,成人漫畫,成人影片,情色網


情趣用品,A片,免費A片,日本A片,A片下載,線上A片,成人電影,嘟嘟成人網,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,微風成人區,成人文章,成人影城,情色,情色貼圖,色情聊天室,情色視訊,情色文學,色情小說,情色小說,臺灣情色網,色情,情色電影,色情遊戲,嘟嘟情人色網,麗的色遊戲,情色論壇,色情網站,一葉情貼圖片區,做愛,性愛,美女視訊,辣妹視訊,視訊聊天室,視訊交友網,免費視訊聊天,美女交友,做愛影片

av,情趣用品,a片,成人電影,微風成人,嘟嘟成人網,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,成人文章,成人影城,愛情公寓,情色,情色貼圖,色情聊天室,情色視訊,情色文學,色情小說,情色小說,色情,寄情築園小遊戲,情色電影,aio,av女優,AV,免費A片,日本a片,美女視訊,辣妹視訊,聊天室,美女交友,成人光碟

情趣用品.A片,情色,情色貼圖,色情聊天室,情色視訊,情色文學,色情小說,情色小說,色情,寄情築園小遊戲,情色電影,色情遊戲,色情網站,聊天室,ut聊天室,豆豆聊天室,美女視訊,辣妹視訊,視訊聊天室,視訊交友網,免費視訊聊天,免費A片,日本a片,a片下載,線上a片,av女優,av,成人電影,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,成人文章,成人影城,成人網站,自拍,尋夢園聊天室

william said...

情趣用品,情趣用品,情趣,情趣,情趣用品,A片,A片,情色,A片,A片,情色,情趣用品,情趣用品

A片,A片,A片下載,做愛,成人電影,.18成人,日本A片,情色小說,情色電影,成人影城,自拍,情色論壇,成人論壇,情色貼圖,情色,免費A片,成人,成人網站,成人圖片,AV女優,成人光碟,色情,色情影片,免費A片下載,SEX,AV,色情網站,本土自拍,性愛,成人影片,情色文學,成人文章,成人圖片區,成人貼圖

情色文學,色情小說,色情,寄情築園小遊戲,AIO交友愛情館,情色電影,一葉情貼圖片區,色情遊戲

言情小說,情色論壇,色情網站,微風成人,成人電影,嘟嘟成人網,成人,成人貼圖,成人交友,成人圖片,18成人,成人小說,成人圖片區,微風成人區,成人網站,免費影片,色情影片,自拍,hilive,做愛,微風成人,微風論壇,AIO

sex999 said...

A片,A片,情色,情色,A片,A片,情色,情色,A片,A片,A片下載,做愛,成人電影,.18成人,日本A片,情色小說,情色電影,成人影城,自拍,情色論壇,成人論壇,情色貼圖,情色,免費A片,成人,成人網站,成人圖片,AV女優,成人光碟,色情,色情影片,免費A片下載,SEX,AV,色情網站,本土自拍,性愛,成人影片,情色文學,成人文章,成人圖片區,成人貼圖

美女交友,AIO交友愛情館,AIO,成人交友,視訊交友網,視訊交友,拓網交友,PC交友,視訊交友90739,交友,情色交友,聊天室交友,辣妹視訊,視訊辣妹,美女視訊,視訊美女,情色視訊,日本AV,免費視訊聊天,視訊聊天,AV女優,AV,視訊聊天室,視訊,免費視訊,情人視訊網,本土自拍,自拍,AVDVD,SEX,微風成人,微風論壇,微風成人區,成人網站,成人,成人電影,嘟嘟成人網,成人貼圖,成人影片,成人圖片區,成人圖片,18成人,成人小說,成人影城,成人文章,成人論壇,愛情公寓,情色論壇,情色,色情聊天室,色情,情色貼圖,情色文學,色情小說,情色小說,寄情築園小遊戲,色情遊戲,情色電影,情色網,做愛,UT聊天室,聊天室,聊天,哈拉聊天室,豆豆聊天室,尋夢園聊天室,聊天室尋夢園,080苗栗人聊天室,苗栗人聊天室,080中部人聊天室,080聊天室,中部人聊天室,柔情聊天網,6K聊天室,小高聊天室,上班族聊天室,免費A片,A片,成人聊天室,一夜情聊天室,情色聊天室,色色網,免費AV

BloggerBoy said...

成人網站,av女優,成人網站,a片,成人影片,h漫,成人電影,成人電影,色情,成人影片,免費A片,色情,成人影片,色情,免費A片,微風成人,情色,成人網站,av女優,成人網站,a片,成人影片,h漫,色情,成人電影,色情,成人電影,色情,成人影片,免費A片,成人影片,免費A片,情色,微風成人,成人網站,av女優,成人網站,a片,成人影片,h漫,成人電影,成人電影,色情,成人影片,免費A片,色情,成人影片,色情,免費A片,





微風成人,情色,成人網站,av女優,成人網站,a片,成人影片,h漫,色情,成人電影,色情,成人電影,色情,成人影片,免費A片,成人影片,免費A片,情色,微風成人,情趣用品,情趣用品,情趣用品,情趣用品,打卡鐘,跳蛋,持久液,成人網站,成人網站,成人網站,成人網站,色情網站,色情網站,色情網站,色情網站,av女優,av女優,av女優,av女優,色情,色情,色情,色情,h漫,h漫,h漫,h漫,sex,sex,sex,sex,成人影片,成人影片,成人影片,成人影片,成人電影,成人電影,成人電影,成人電影,av女優,a片,a片,a片,a片,成人網站,







成人網站,成人網站,成人網站,成人影片,成人影片,成人影片,成人影片,av女優,av女優,av女優,av女優,色情,色情,色情,色情,h漫,h漫,h漫,h漫,sex,sex,sex,sex,情色,情色,情色,情色,黃金回收,黃金回收,黃金回收,黃金回收,借錢,借錢,借錢,借錢,植牙,植牙,植牙,牙醫,牙醫,牙醫,a片,a片,a片,a片,情趣用品,情趣用品,情趣用品,情趣用品,成人網站,成人網站,成人網站,成人網站,成人影片,成人影片,



成人影片

,成人影片,av女優,av女優,av女優,av女優,色情,色情,色情,色情,h漫,h漫,h漫,h漫,sex,sex,sex,sex,情色,情色,情色,情色,黃金,黃金,黃金,黃金,黃金價格,黃金價格,黃金價格,黃金價格,黃金買賣,黃金買賣,黃金買賣,黃金買賣,當舖,當舖,當舖,當舖,鑽石價格,鑽石價格,鑽石價格,鑽石價格,鑽石回收,鑽石回收,鑽石回收,鑽石回收,鑽石買賣,鑽石買賣,鑽石買賣,鑽石買賣,黃金存摺,黃金存摺,黃金存摺,







黃金存摺,辣妹視訊,辣妹視訊,辣妹視訊,辣妹視訊,080視訊聊天室,080視訊聊天室,080視訊聊天室,080視訊聊天室,美女交友,美女交友,美女交友,美女交友,情色視訊,情色視訊,情色視訊,情色視訊,哈啦聊天室,哈啦聊天室,哈啦聊天室,哈啦聊天室,ut聊天室,ut聊天室,ut聊天室,ut聊天室,聊天室,聊天室,聊天室,打卡鐘,火鍋吃到飽,創業加盟,賺錢,吃到飽麻辣鍋成人網站,成人影片,av女優,h漫,成人網站,成人電影,a片,色情,成人影片,色情,成人電影,色情,h漫,成人影片,成人電影,免費A片,色情,成人電影,成人影片,免費A片,色情,成人網站,免費A片,成人網站,色情,a片,成人影片,情色,免費A片,微風成人,情色,成人影片,微風成人,av女優

sexy野牛 said...

a片,成人網站,美女交友,美女視訊,a片,成人網站,美女交友,美女視訊,a片,成人網站,美女交友,美女視訊,聊天室,美女視訊,聊天室,美女視訊



成人網站,成人影片,av女優,h漫,成人網站,成人電影,a片,色情,成人影片,色情,成人電影,色情,h漫,成人影片,成人電影,免費A片,色情,成人電影,成人影片,免費A片,色情,成人網站,情趣用品,免費A片,成人網站,色情,a片,成人影片,情色,免費A片,微風成人,情色,成人影片,微風成人,av女優



成人網站,色情網站,av女優,色情,成人網站,成人影片,成人電影,av女優,a片,成人網站,成人網站,成人網站,成人影片,av女優
色情,h漫,sex,情色,a片,成人網站,成人影片,av女優,色情
h漫,sex,情色,辣妹視訊,080視訊聊天室,美女交友
情色視訊,哈啦聊天室,ut聊天室,聊天室



美女交友,美女交友,美女交友,視訊辣妹,視訊辣妹,視訊辣妹,視訊聊天室,視訊聊天室,視訊聊天室,成人交友,成人交友,成人交友,視訊美女,視訊美女,視訊美女,聊天室,聊天室,聊天室



成人網站,av女優,成人網站,a片,成人影片,成人電影,h漫,成人電影,色情,成人影片,色情,免費A片,成人影片,免費A片,情色,微風成人
美女交友,美女交友,視訊辣妹,視訊辣妹,視訊聊天室,視訊聊天室,成人交友,成人交友,視訊美女,視訊美女,聊天室,聊天室
美女交友,美女交友,美女交友,視訊辣妹,視訊辣妹,視訊辣妹,視訊聊天室,視訊聊天室,視訊聊天室,成人交友,成人交友,成人交友,視訊美女,視訊美女,視訊美女,聊天室,聊天室,聊天室



a片,成人網站,av女優,h漫,成人影片,免費a片,情趣用品,色情,微風成人,情色,sex,成人電影,聊天室,美女交友,辣妹視訊,視訊聊天室,成人交友,美女視訊,聊天室,美女交友,辣妹視訊,視訊聊天室,成人交友,美女視訊,成人網站,情色,情趣用品,色情,sex,免費a片,h漫,av女優,成人影片,a片,微風成人,成人電影,聊天室,美女交友,辣妹視訊,視訊聊天室,成人交友,美女視訊,聊天室,美女交友,辣妹視訊,視訊聊天室,成人交友,美女視訊,成人電影,成人網站,情色,情趣用品,色情,sex,免費a片,h漫,av女優,成人影片,a片,微風成人,聊天室,美女交友,辣妹視訊,視訊聊天室,成人交友,美女視訊,聊天室,美女交友,辣妹視訊,視訊聊天室,成人交友,美女視訊



a片,a片,a片,a片,a片,av女優,av女優,av女優,av女優,成人網站,成人網站,成人網站,成人網站,h漫,h漫,h漫,h漫,成人網站,成人網站,成人網站,成人網站,免費A片,免費A片,免費A片,免費A片,成人影片,成人影片,成人影片,成人影片,成人電影,成人電影,成人電影,成人電影,免費A片,免費A片,免費A片,免費A片,成人電影,成人電影,成人電影,成人電影,色情,色情,色情,色情,成人影片,成人影片,成人影片,成人影片,成人影片,微風成人,微風成人,微風成人,微風成人,色情,色情,色情,色情,情趣用品,情趣用品,情趣用品,色情,色情,色情,色情,成人影片,成人影片,成人影片,成人影片,情色,情色,情色,情色,打卡鐘,跳蛋,持久液,色情網站,黃金回收,借錢,植牙,牙醫,成人網站,成人影片,av女優,色情,h漫,情色,sex,黃金價格,黃金,黃金買賣,黃金存摺,鑽石價格,鑽石回收,鑽石買賣,當舖,辣妹視訊,080視訊聊天室,美女交友,情色視訊,哈啦聊天室,ut聊天室,聊天室,打卡鐘,火鍋吃到飽,創業加盟,賺錢,吃到飽麻辣鍋