Autocomplete JSON output format.

[Annet]

I've got this rows object as the source of an autocomplete function:

rows = db(query).select(db.vtx_vertex.name, left=left, distinct=True, orderby=db.vtx_vertex.name).as_list()
result = [r['name'] for r in rows]
return response.json(result)

This is the autocomplete I'd like to use::

https://www.devbridge.com/sourcery/components/jquery-autocomplete/#

It returns this:

0:    "first option"

1:    "second option"

2:    "third option"

What I need it to return is this:

"suggestions": [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
    ]

Or this:

"suggestions": ["United Arab Emirates", "United Kingdom", "United States"]

Anyone using this js or knowing how to format the json output correctly?

Kind regards,

Annet

[Jose C]

One way to get your 2nd option:

in controller:

def country_list():  
   countries = []
   for rec in db(query).select(db.vtx_vertex.name, left=left, distinct=True, orderby=db.vtx_vertex.name):
       countries.append(rec.name)
   return dict(suggestions = countries)

in the view (js), call the controller function above using .json extension:   https://mysite.com/country_list.json

Depending on your settings, you may need to add '*.json' to response.generic_patterns if you have overridden those at any point.  For example:

response.generic_patterns = ['*.json', '*.xml']    # only allow json and xml generic patterns

HTH,

[Annet]

Hi Jose,

Thanks for you reply.

Following your suggestion, and making one adjustment:

return dict(suggestions=json.dumps(countries))

the controller/function jsonsource/name_autocomplete now returns a correct list:

["first_option", "second_option", "third_option"]

In layout.html before the closing body selector I've got:

<script type="text/javascript">
$(document).ready(function() {
  $(function() {$("#dummy_table_name").autocomplete({serviceUrl: "{{=URL('jsonsource', 'name_autocomplete')}}", minChars: 2});});
});
</script>

When typing some name in the auto complete field I get the following error:

Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

    jQuery 6

        d    

    currentRequest

    c

    fireWith

    l

    o

When I use a local look up like this:

<script type="text/javascript">
$(document).ready(function() {

  var suggestions =  ["first_option", "second_option", "third_option"]

  $(function() {$("#dummy_table_name").autocomplete({lookup: suggestions, minChars: 2});});
});
</script>

the autocomplete works, however, I need the ajax lookup, I hope you can help me

solve this one last issue.

Kind regards,

Annet

[Jose C]

I suspect that it has to do with the headers that are set on the response object. 

When calling the function with .json extension (as in my example) the content-type headers are automagically set by web2py to application/json and the content formatted accordingly. 

From what I can tell, your method will return a string/html type.  It is likely that the JS code is internally checking the returned response and expecting json as content-type.

If I call my controller function without the .json extension, I get the same JSON.parse error message.