Question

Trying to get jquery AutoComplete to return and populate it’s dropdown. The input and call looks like this:

<input id="user_login" name="user[login]" size="22" type="text" value="" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery('#user_login, #user_group_name').autocomplete({
      source: '/users.js'
    });    
  });
</script>

The URL string that gets called is:

http://localhost:3000/users.js?term=user

The return from users.js looks like this:

[{"id":1802,"login":"some.user"},{"id":3882,"login":"some.other_user"},{"id":2024,"login":"user"}]

The autocomplete seems to interpret some of the return: it populates the autocomplete UL with three LIs, but they are all empty. If I search for something else, the appropriate amount of empty LIs is created. I’ve verified the JSON return with JSONLint.

Answer 1

The problem was with my return. Autocomplete wanted a single item per term, like so:

[{"login":"some.user"}]