Symfony Twig中json_encode数组如何作为Autocomplete数据源？

看起来你遇到的核心问题是没有正确处理数组的遍历映射——你现在的代码把整个用户数组当成了单个对象来取name和id，但实际上userlist是一个包含多个用户的数组，所以需要把每个用户元素转换成Autocomplete需要的{label, value}结构。

问题分析 #

你的原JS代码里：

var datasource = [{"label" : userlist.name, "value" : userlist.id}];

这里的userlist.name是在取数组本身的name属性（而不是数组里每个用户的name），显然数组没有这个属性，所以最终label和value都是undefined，Autocomplete自然无法正常工作。

解决方案1：在JavaScript中映射数组 #

直接利用JS的Array.map()方法，把userlist数组里的每个用户对象转换成Autocomplete要求的格式：

<div class="form-group required"> 
  <input id="autocomplete" name="driver[]" class="form-control" value="{{ place.name }}"/> 
</div>

<script>
// 从Twig获取用户数组
var userlist = {{ lusers|json_encode|raw }};

// 把每个用户转换为{label: 用户名, value: 用户ID}的结构
var datasource = userlist.map(function(user) {
    return {
        label: user.name,
        value: user.id
    };
});

// 初始化Autocomplete
$('#autocomplete').autocomplete({ 
    source: datasource 
});
</script>

解决方案2：在Twig中预先处理数据源 #

如果你更倾向于在后端（Twig）处理好格式，也可以提前把数组转换成符合要求的结构，这样前端JS更简洁：

{# 在Twig里预先构造Autocomplete需要的数组 #}
{% set autocompleteDataSource = [] %}
{% for user in lusers %}
    {% set autocompleteDataSource = autocompleteDataSource|merge([
        {label: user.name, value: user.id}
    ]) %}
{% endfor %}

<div class="form-group required"> 
  <input id="autocomplete" name="driver[]" class="form-control" value="{{ place.name }}"/> 
</div>

<script>
// 直接使用Twig处理好的数据源
var datasource = {{ autocompleteDataSource|json_encode|raw }};
$('#autocomplete').autocomplete({ 
    source: datasource 
});
</script>

额外注意事项 #

• 确保lusers确实是一个包含用户对象的数组/Doctrine集合，每个对象都有name和id属性；
• 使用|raw过滤器是为了让Twig不转义JSON内容，保证JS能正确解析；
• 如果你的Autocomplete需要在选择后填充其他字段（比如显示用户名但提交ID），当前的value设为user.id是合适的，选择后输入框会显示label（用户名），但实际提交的是value（ID）。

内容的提问来源于stack exchange，提问作者era