I'm trying to use the Jquery-UI autocomple in my rails app. Inside of my application.js I have the line
$j('#autocomplete').autocomplete({
source:'contexts/1.json'
});
From what I read on the documentation the function expects json data in return so inside of my context_controller Show method 开发者_开发知识库I have the following
def show
@context = Context.find(params[:id])
if params[:term]
@tags = Tag.find(5, :conditions => ['name LIKE ? AND context_id = ?',params[:q], @context.id])
else
@tags = Tag.find(:all, :conditions => ["context_id = ?",@context.id])
end
respond_to do |format|
format.html
format.json { render :json => @tags}
end
end
The problem is that the server doesn't seem to be receiving the request when I begin typing in the input box that autocomplete is attached to. How can I make this work?
After a lot of searching around the intrawebz I realized that I was making a few small critical errors.
The first thing I changed was to put the javascript into $j(document).ready(function(){
so that it now reads
$j(document).ready(function() {
$j('#autocomplete').autocomplete({
source: '/contexts/1'
});
});
Not really sure why this made a difference, maybe someone can tell me.
After I did that I saw that it was correctly sending the json request to the server and receiving something back but nothing was being put into the autocomplete menu. From this point I realized that jQuery UI autocomplete filled in the menu with the attribute of the serialized object called "value". My model didn't have this attribute. I fixed this by adding a method(virtual attribute) of "value" into my Tag.rb model file. and changed my controller so that it would return the "value" attribute along with the object.
format.json { render :json => @tags.to_json(:methods=>:value)}
Although I now had a serialized object with a 'value' attribute, it still was not working. The final step that I had to take was to have the .to_json() method not return the type of object as the root. This is found inside config/initializers/new_rails_defaults.rb
ActiveRecord::Base.include_root_in_json = false
After all of this I was able to get autocomplete to work in my rails project without chaining myself to a plugin that didn't have all of the features that I would have liked.
On the javascript side, here's a sample of what I used in the past. Keep in mind that this is querying a .NET WCF service, but from a javascript perspective, it shouldn't matter.
'#autocomplete' is a simple html textbox
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$('#autocomplete').autocomplete({
source: function (request, response)
{$.getJSON("URLThatReturnsJSON", {
name: extractLast(request.term),
context_id: $('.context_id').val()
}, function (msg) {
return response(msg.d);
});
}
Here is a sample if what is sent to the server..(08 is an example of something in the autocomplete textbox) http://localhost/URLThatReturnsJSON?name=08&context_id=1
Here's a sample of what comes back {"d":["0008","0827","0849","0866","0882","0804"]}
For security reasons, WCF services like to set the property name d when identifying a list of data. Hence the reason why in my response function I reference like msg.d. Perhaps in ruby, you can just do msg.
Edit One thing I forgot to mention is that my sample uses a multi value textbox, that means that I'm trying to use autocomplete for more than one entry on the textbox i.e. Text box can contain, 09, bill, abc
精彩评论