CODEWITHSUNDEEP
javascriptruby-on-rails-3jquery-uijquery-ui-autocomplete
Deej
Deej

Reputation: 5352

JQuery-Ui Autocomplete not displaying results

I am trying to display autocomplete results for a list of managers. I have the following code:

Application.js 

 function log(message) {
        $( "<div/>" ).text( message ).prependTo("#log");
    }

   $("#managers").autocomplete({
        source : function(request, response) {
            $.ajax({
                url : "/managerlist",
                dataType : "json",
                data : {
                    style : "full",
                    maxRows : 12,
                    term : request.term
                },
                success : function(data) {
                    var results = [];
                    $.each(data, function(i, item) {
                        var itemToAdd = {
                            value : item,
                            label : item
                        };
                        results.push(itemToAdd);
                    });
                    return response(results);
                }
            });
        }
    });

Project controller

def manager_list 
  list=Project.all.map{|i|i.manager_user_id} 
  arr= [].concat(list.sort{|a,b| a[0]<=>b[0]}).to_json 
  render :json =>arr
end

Routes.rb 

  match '/managerlist' => 'projects#manager_user_id'

_form.html.erb 

<p>
        <%= f.label :manager_user_id %><br />
        <input id="managers" />
    </p>

The following code is fine, I don't recieve no errors in firebug. However when I try to enter a managers name for example James Johnson the name won't appear. I have also tried putting the whole function in the _form.html.erb and wrapped it in tags this didn't work. Is there any idea why this is happening

So I've managed to fix my error, which was because of the ordering of Jquery core and Jquery ui.

I've got the managers to be listed. In the image below.

List All users

From the image it can be seen that when I type 'Arm' it brings the entire list of managers, when it should display 'Deshawn Armstrong'. I understand that this is most probably to do with my project controller below

Project controller

def manager_list 
  list=Project.all.map{|i|i.manager_user_id} 
  arr= [].concat(list.sort{|a,b| a[0]<=>b[0]}).to_json 
  render :json =>arr
end

Upvotes: 0

Views: 4805

Answers (1)

jk.
jk.

Reputation: 14435

Check the response in the Firebug console and make sure the string is in proper json format for the autocomplete.

It appears that you are just returning an array. The dataType setting in .ajax doesn't convert to json; it's just expecting that format back. If you are not sending json back from your url : "/managerlist", this may be the problem.

Actually, provided your ajax function is working correctly, you could just:

return response(JSON.stringify({ results: results }));

jsfiddle example of JSON.stringify: http://jsfiddle.net/xKaqL/

Based on your new information, you need to add a minLength option to your autocomplete.

$("#managers").autocomplete({
    minLength: 2,   // 2 or whatever you want
   // rest of your code

Upvotes: 2

Related Questions