Insert List into HTML Autocomplete list via loop for Flask Website

Question

I am trying to create a autocomplete function list to put into my webpage via Python and Jinja2(via Flask)

Data:

 data_list=['router1 | location - tx | model A | xxserialxx | 10.0.0.1 | ',
 'router2 | location - mo | model A | xxserialxx | 10.0.0.2 | ',
 'router3 | location - ca | model B | xxserialxx | 10.0.0.3 | ',
 'router4 | location - fl | model A | xxserialxx | 10.0.0.4 | ',
 'router5 | location - ny | model B | xxserialxx | 10.0.0.5 | ']

This is the default look that came with my template:

<input class="form-control" placeholder="Type something..." type="text"
        data-autocomplete='[
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"]'>

I tried:

<input class="form-control" placeholder="Type something..." type="text"
        data-autocomplete='[{% for item in data_list %}
        "{{item}},"]' {% endfor %}>

And nothing happens, I load the HTML and the "data-autocomplete=" is equal to nothing..

The logic of this is definatly wrong I can see that.

I haven't been able to find much documentation on how to put for loop into a list like structure using Jinja.

I THINK this is the completely wrong way to do this. Help?

Desired output:

<input class="form-control" placeholder="Type something..." type="text"
        data-autocomplete='[
        "router1 | location - tx | model A | xxserialxx | 10.0.0.1 | ",
        "router2 | location - mo | model A | xxserialxx | 10.0.0.2 | ",
        "router3 | location - ca | model B | xxserialxx | 10.0.0.3 | ",
        "router4 | location - fl | model A | xxserialxx | 10.0.0.4 | ",
        "router5 | location - ny | model B | xxserialxx | 10.0.0.5 | ",]'>

Answer 1

You can use the join method and don't even need the for loop. Try this:

data-autocomplete="{{'[' + ','.join(data_list) + ']'}}"