【问题标题】：autocomplete using jquery shows bullet points with no values in Laravel 5.4使用 jquery 的自动完成显示 Laravel 5.4 中没有值的项目符号
【发布时间】：2017-06-03 22:34:36
【问题描述】：

我正在使用 Laravel 5.4、Ajax 和 Jquery 来自动完成搜索字段。我无法显示搜索结果。我所看到的只是其中没有搜索数据的项目符号列表。 我不确定如何检查数据是否真的传递到视图？我做了 console.log (ui) 但控制台上没有结果

下面是显示带有项目符号结果的搜索栏的屏幕截图。

jquery 搜索代码

 $("#searchfield").autocomplete({
  source    : '{{ url("/admin/users/autocomplete") }}',
  minlength :1,
  autofocus : true,
  select:function (e,ui){
    console.log(ui);
    alert(ui);
  }
});

输入域代码

<input type="text" class="form-control" style="width:70%; display:none;" name="searchfield" id="searchfield" placeholder="Enter username..." >

从下拉列表中选择名字时，输入字段中的显示无属性更改为 display:block。如果你有这个想法，那不是问题。

更新 - 来自 url /admin/users/autocomplete?term=...的输出

[{"id":6,"name":"Lulu"},{"id":14,"name":"Luis"}]

现在我的状态好多了，我所需要的只是将数据插入到那些空结果中。下面是带有更新 html 状态的图像和检查元素屏幕的屏幕截图，如果它有助于发现错误：

【问题讨论】：

您能否提供一个示例链接或 /admin/users/autocomplete 的输出（至少是我们可以在那里看到结构的部分）您是否添加了 jquery 自动完成的样式表？跨度>
@SimonEritsch 我没有为自动完成添加任何样式，我不知道要覆盖哪些 css 类。我将在我的问题中添加 /admin/users/autocomplete 的输出。请更新问题
很可能是文本颜色或 z-index 的问题。使用您的浏览器开发工具了解更多信息，或给我们提供minimal reproducible example 以重现该问题。
@CBroe 是的，但我无法达到这些要点，它发生在闪存中，我看到 .ui-autocomplete-input 我将其设置为 z-index 1000！ -helper-hidden-accessible，我将其设置为显示：无，因为它说你有 5 个结果，我不会显示
我认为没有数据返回到视图。我无法将其打印到 console.log 左右。如何验证是否返回了自动填充数据？

标签： javascript jquery html ajax laravel-5.4

【解决方案1】：

我只是将收集数据并将其提供给自动完成源的操作分开。以下是我的代码：

  var searchdata = [];
  var select2 = $('#searchfield').val();
  $.ajax({
          type : 'GET',
          url  :  "{{url('/admin/users/autocomplete')}}",
          data :  {type : id, type_val : select2},
        }).done(function(data)
        {
          console.log(data);
          $.each(data, function( index, value ) 
          {
            searchdata.push(data[index].firstname);
          });
          $("#searchfield").autocomplete(
          {
            source    : searchdata,
            minlength :1,
            autofocus : true
          });       
    });
});

【讨论】：

【解决方案2】：

Jquery 自动完成需要一个特定格式的数组。尝试将您的自动完成输出更改为：

[
   {"data":6,"value":"Lulu"},
   {"data":14,"value":"Luis"}
]

所以只需将每个元素的对象键的名称从 id、名称更改为数据、值

【讨论】：