javascript - 用 Twig 对象填充实现 javascript 自动完成数据

Question

我正在开发一个应用程序，现在我正在使用 Materialise 自动完成插件。

现在我想解析一个 twig 对象数组(假设是 Customers)，并在 JS 中创建一个这样的数组:

var customersAutocomplete = [
        {
        key: 1,
        Title: "John Doe",
        label: 'John'},
        {
        key: 2,
        title: "Ulrich",
        label: 'John'},
        {
        key: 3,
        label: 'James'}
        ];

自动完成来自全局 JS 文件，看起来像这样:

$.fn.autocomplete = function (options) {
      // Defaults
      var defaults = {
        data: {customersAutocomplete},
        limit: Infinity,
        onAutocomplete: null,
        minLength: 1
      };

Answer 1

添加到@RaymondA 的评论中，如果您的 customers 对象已经具有正确的结构，您可以使用 Twig 直接在模板中执行此操作:

<!-- views/your.view.html.twig -->
<script>   
    customersAutocomplete = {{ customers|json_encode() }};
</script>

然后在您的 js 文件中使用 customersAutocomplete:

$.fn.autocomplete = function (options) {
      // Defaults
      var defaults = {
        data: customersAutocomplete,
        limit: Infinity,
        onAutocomplete: null,
        minLength: 1
      };