如何将Laravel后端变量传递到jQuery数组以实现自动补全功能

错误原因 #

• 你直接调用{{ $value->email }}时，$value是Person::get()返回的Eloquent集合，属于多个Person对象的数组结构，不是单个对象，无法直接读取单个属性
• 后续用let users = '{{ json_encode($data) }}'的问题有两个：
  1. 外层加了单引号会把JSON结果转换成纯字符串，无法作为JS数组对象使用
  2. {{ }}是Laravel Blade的自动转义输出语法，会把JSON里的双引号转义为"，直接导致JSON结构失效

正确实现步骤 #

1. 保持现有Controller代码不变 #

你的Controller逻辑是正确的，已经把查询到的在线Person集合以$data变量传入视图。

2. 修改JS中users变量的赋值逻辑 #

把原来的users赋值部分替换为Laravel内置的@jsonBlade指令，不需要加引号，直接输出合法的JS对象：

let users = @json($data);

如果使用的是5.5以下的低版本Laravel，可以用非转义输出语法：

let users = {!! json_encode($data) !!};

3. 完整可运行的JS代码 #

$(function() {
  // 仅修改这一行赋值代码即可
  let users = @json($data);

  function handleAutocomplete(term) {
    // 可选：改成不区分大小写的匹配，适配更多场景
    let options = $.grep(users, function(e){ 
      return e.name.toLowerCase().startsWith(term.toLowerCase()); 
    });
    return options;
  }
  $("#name").autocomplete({
    minLength: 0,
    source: function(request, response) {
      let name = request.term;
      let data = handleAutocomplete(name);
      response(data);
    },
    focus: function(event, ui) {
      $("#name").val(ui.item.name);
      return false;
    },
    select: function(event, ui) {
      $("#name").val(ui.item.name);
      $("#email").val(ui.item.email);
      return false;
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<a>" + item.name + "<br>" + item.email + "</a>")
      .appendTo(ul);
  };
});

排查验证方法 #

修改后可以在浏览器控制台打印users变量，确认输出的是包含所有查询结果的数组，每个元素都有name和email属性，确认结构和你参考的示例users数组结构一致即可正常运行。

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