01 July 2008

Update on Rails, jQuery, autocomplete

Today I changed my auto_complete_jquery plugin (which I blogged about previously) to work with a different jQuery autocomplete plugin (that's not confusing is it?!). Previously, I'd been using the "jquery-autocomplete" plugin, but had been having problems with it always being case sensitive, and with it being pretty darn slow. To solve that, I wound up switching to Dylan Verheul's jquery autocomplete plugin, which is fantastic! So, I had to update my plugin (literally changed two lines, along with the readme and some comments).

So, what does it all mean? First, things are no longer case-sensitive (although you can tweak that if you need it, see the docs for DV's jquery plugin). Second, the speed is near instant, and if it's taking any time at all, there's now a CSS style you can set to show an indicator while the AJAX call is running (nice!). Further, there are a slew of options you can set, but one of the coolest things is the ability to set a formatter JavaScript function to adjust the display of the returned results, but without affecting the actual value that is placed in your text field. This is really cool for providing further information about a given matched item. For example, I use it to display, on a line below the matched name, the location of the item. There's an interactive example of this on Dylan Verheul's site.

I highly recommend updating all around on this. For those that might be using my prior version, the changes you'd need to make are:


  • Change your JavaScript calls that make a HTML input into an auto-complete from this format:

    $("input#post_title").autocomplete({ ajax: "auto_complete_for_post_title" })

    to this:

    $("input#post_title").autocomplete("auto_complete_for_post_title")


  • Update to the HEAD of my plugin.

  • Remove the old jquery.ui.autocomplete*.js files, and install Dylan's single jquery.autocomplete.js file, updating your JS includes accordingly. Same goes for the stylesheet.



Note, to do the cool 2nd line output of auto-complete items, you will need to write your own auto-complete Rails action, which means you don't need my plugin :) I may update my plugin at some point so you can pass a block in to the autocomplete function to create this same scenario, but this is pretty specific stuff, so we'll see. As a very brief set of instructions to do this, you can essentially copy-paste the auto-complete method that gets defined by my plugin, and then update what you return as text. To do the 2nd line bit, you want to return items in the format, "item|2nd line stuff", (so use the pipe symbol to separate the two lines). Then, you can use a simple JavaScript formatter function like:

function formatAutocompleteItem(row) {
return row[0] + "<br><i>" + row[1] + "</i>";
}


Then, update your call to the jQuery autocomplete that sets up a field as autocomplete to be:

$("input#post_title").autocomplete("auto_complete_for_post_title", { formatItem:formatAutocompleteItem })


Enjoy!

12 comments:

chickenspud said...

Great stuff.

How do you get it to work with a hidden ID when you don't want to submit the text field?

Normally you'd want this when you use autocomplete as a nice selector when you have what would otherwise be a vast dropdown.

cheers

et said...

Couldn't seem to get this working... every time I type into the text field I get the following:

Parameters: {"action"=>"show", "id"=>"auto_complete_for", "q"=>"13", "controller"=>"admin/posts"}
Post Columns (0.001107) SHOW FIELDS FROM `posts`
Post Load (0.000172) SELECT * FROM `posts` WHERE (`posts`.`id` = 0)


ActiveRecord::RecordNotFound (Couldn't find Post with ID=auto_complete_for):

luke hartman said...

et, I get the same errors. It's as though the plugin isn't registering so the route is taken as though it were a regular REST request to the show action. I'll post back if I'm able to figure it out.

Robert Dempsey said...

Any update to the error mentioned by the above users? I'm getting the exact same error and can't get past it. tThanks.

Anonymous 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,色情網站,本土自拍,性愛,成人影片,情色文學,成人文章,成人圖片區,成人貼圖

情色視訊,美女視訊,辣妹視訊,視訊聊天室,視訊交友網,免費視訊聊天,視訊交友90739,視訊,免費視訊,情人視訊網,視訊辣妹,影音視訊聊天室,視訊交友,視訊聊天,免費視訊聊天室,成人視訊,UT聊天室,聊天室,豆豆聊天室,色情聊天室,尋夢園聊天室,聊天室尋夢園,080聊天室,080苗栗人聊天室,上班族聊天室,小高聊天室

6K聊天室,080中部人聊天室,聊天室交友,成人聊天室,中部人聊天室,情色聊天室,AV女優,AV,A片,情人薇珍妮,愛情公寓,情色,情色貼圖

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

Sergueï said...

Hey, Chris! At your advice I changed Rils auto_complete plugin for your auto_complete_jquery. My first question is how to use it from 'belongs_to' side? For example, a Client belongs_to :city, and City has_many:clients. I'd like to set an auto_complete on city_id field.What should put in ClientsController, - auto_complete_for :city, :cityname or auto_complete_for :client, :city?And the 2d question (as I'm not a JavaScript expert at all :() how to get the city_id when creating a Client(I get city name by auto_comlete function but not its ID).Thank you.

Sergueï said...

I can't get it work.I downloaded on Feb,19 2009 your auto_complete_jquery plugin from http://github.com/chris/auto_complete_jquery/tree/master, unzipped it and pasted in vendor/plugins folder.As advised in README file I downloaded jQuery plugin from http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.I copy-pasted the following javascript files to my app/public/javascripts folder: jquery.autocomplete.js, jquery.js,jquery.ajaxQueue.js,jquery.bgiframe.min.js,thickbox-compressed.js; and the css file jquery.autocomplete.css to myapp/pyblic/stylesheets. In my ClientsController I added auto_complete_for :city, :cityname. And at least in views/clients/new I have (sorry for the formatting but only html tags are accepted by the blog):"script_tag_start" type="text/javascript"
dollar_sign(document).ready(function() 'bracket_opened"
dollar_sign("input#city_cityname").autocomplete("auto_complete_for_city_name")
"bracket_closed");
"script_tag_end"
startofmyformforloop(@client) do |f|
f.label :name
f.text_field :name ]

f.label :name
text_field :city, :cityname, :autocomplete =>"off"

The problem is that in your README the syntax for auto_complete fileds in view is as follows:
post.text_field :title, :autocomplete =>"off"

but in 'auto_complete_jquery.rb file of your plugin you say that it should be like that:
text_field_with_auto_complete :post, title. Which one is correct? WhenI tried it whith
text_field :city, :cityname, :autocomplete =>"off" syntax I got an error when trying to type something in the 'City' textfield:
Processing ClientsController#show

Parameters: {"timestamp"=>"1235122281720", "id"=>"auto_complete_for_city_name", "q"=>"mo", "limit"=>"150"}

SQL (0.0ms) SET NAMES 'utf8'

SQL (0.0ms) SET SQL_AUTO_IS_NULL=0

Client Columns (0.0ms) SHOW FIELDS FROM `clients`

Client Load (0.0ms) SELECT * FROM `clients` WHERE (`clients`.`id` = 0)

ActiveRecord::RecordNotFound (Couldn't find Client with ID=auto_complete_for_city_name):
and the rest of the stuff...
At the end of the stack trace - one more strange error:
ActionController::RoutingError (No route matches "/stylesheets/indicator.gif" with {:method=>:get}):

For your info, I added that in my routes:
map.auto_complete ':controller/:action',
:requirements => { :action => /auto_complete_for_\S+/ },
:conditions => { :method => :get }
Can you explain me what I did wrong,please?Thank you.

Sergueï said...

Of course, after checking the jquery.autocomplete.css file I found the link to an image 'indicator.gif' that existe nowhere in the plugin:

.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}

jancsi said...

Merci bien!!

Thought I'd mention in case someone else had the 'id' => 'auto_complete_for...' problem

Just add a route

map.connect ':controller/:id/auto_complete_for_model_field', :action => 'auto_complete_for_model_field', :format => 'json'

Also I didn't use model.text_field, just text_field.

jancsi said...

I wanted to paste some example code but the blog wouldn't let me.

If you do a custom auto_complete_for_model_field method, put your field entries in an array, join the array with "\n" (eg "Jim\nJohn\nKarl") and render colon-'inline' equals-greater-than quote less-than-percent-equals @fields percent greater-than quote.

Just throw auto_complete a string with entries separated by "\n" and it'll do the rest.