0

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

1 Answer 1

2

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
Sign up to request clarification or add additional context in comments.

4 Comments

@Djj It prompts you to download? It should be displaying it on the page in the browser. But, if all is well with the ajax, take a closer look at the success function. And, what is the autocomplete function showing in the console?
@Djj Yes, you must make sure the jquery core and jquery ui js files are loaded before the call to the autocomplete. Look in the Net panel of Firebug. It will show you what and when things were loaded.
@Djj Great, glad you found that problem. Edited my answer.
I understand what the minlength: 2 does. It means that if I enter two characters then the list will appear. Which is fine, but the problem I'm having is that as posted in my example I typed 'Arm'. What should happen is the name 'Deshawn Armstrong' should only appear in the list.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.