时间戳

首页 > 解决方案 > 如何正确将列表转换为 JavaScript 数组？

jquery - 如何正确将列表转换为 JavaScript 数组？

问题描述

我试图调用一个 Jquery Autocomplete自动完成选项的来源来自下面的列表

{% set Source = ['Customer', 'Name', 'Salutation', 'First Name English', '[Type Item Here]'] %}

因为 Jquery AutoComplete 接受一个数组，所以我试图找到一种方法将我的列表转换为 javascript 数组，但没有成功。

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <div class="col-sm-12">
      <div class="ui-widget">
        <label>Tags: </label>
        <input class="tags">
      </div>
    </div>

    {% set Source = ['Customer', 'Name', 'Salutation', 'First Name English', '[Type Item Here]'] %}

    <script>
        $(document).ready(function() {

        /* Auto Complete Form Label*/
        var availableTags = "{{Source|safe}}";

            // alert('auto');
            $( ".tags" ).autocomplete({
              source: availableTags,
              autoFocus: true,
              minLength: 1
            });
        })
    </script>

因此，我怎样才能正确地将我的列表Source转换为一个 javascript 数组，以便我的 AutoComplete 也能正常工作？谢谢

标签： jqueryjinja2

解决方案

您必须将其转换为 JSON，然后打印，为此使用tojson过滤器。由于JSON是有效的 javascript，因此不需要额外的解析或引号包装。

<script>

    // .....

    var tagsList = {{ autocompletList|tojson|safe }};
    var availableTags = {{ Source|tojson|safe }};

    // ..... 

<script>

推荐阅读