JQuery 自动完成 - 显示多个值答案

【问题标题】：JQuery autocomplete - Display multiple valuesJQuery 自动完成 - 显示多个值
【发布时间】：2018-10-09 19:07:30
【问题描述】：

我想在自动完成框中显示多个值。
据我了解，JQuery 自动完成默认使用键“值”向框显示文本。
但我想显示从搜索结果中获得的键“value”、“company”和“tags”。
这是我所拥有的：

我的数据库查询 - 这里只使用 'value'=>$product->title。

public function autoComplete(Request $request) {
    $query = $request->get('term','');

    $products = Products::where('title', 'LIKE', '%' . $query . '%')
                      ->orWhere('company', 'LIKE', '%'. $query .'%')
                      ->orWhere('tags', 'LIKE', '%'. $query .'%')
                      ->get();


    $data=array();
    foreach ($products as $product) {
            $data[]=array('id'=>$product->id, 
                          'value'=>$product->title, 
                          'company'=>$product->company, 
                          'tags'=>$product->tags);

    }
    if(count($data))
         return $data;
    else
        return ['value'=>'No Result Found','id'=>''];
}

我的 JQuery 自动完成脚本

<script>
$(function()
{
     $( "#search_text" ).autocomplete({
      source: "{{ route('searchajax') }}",
      minLength: 1,
      select: function(event, ui) {
        $('#search_text').val(ui.item.value);
      },
    open : function(){
      $(".ui-autocomplete:visible").css({top:"+=13"});
    },
    });
});

我的输入字段

<div class="col">
<input class="form-control form-control-lg form-control-borderless ui-autocomplete-input" 
id="search_text" 
type="search" 
name="q" 
value="{{ isset($s) ? $s : '' }}" 
placeholder="Search for Titles, Companys or Tags" 
autocomplete="off" />

如果有帮助，我会在这个项目中使用 Laravel。

【问题讨论】：

将您的代码粘贴为文本而不是图像。
好的，我会改变它。认为这会更具可读性。
您的第一个查询是否返回正确的数据？ $products = Products::where('title', 'LIKE', '%' . $query . '%') ->orWhere('company', 'LIKE', '%'. $query .'%') ->orWhere('tags', 'LIKE', '%'. $query .'%') ->get();当你尝试 die_dump 时？
是的：i.imgur.com/wtQPF5m.png
我的自动完成功能已经可以使用了，我可以搜索标题、标签、公司。但只是标题显示为结果

标签： javascript php jquery laravel autocomplete

【解决方案1】：

操纵“价值”字段服务器端以获得所需结果不是最简单的吗？比如这样

'value'=>$product->title.', '.$product->company.', '.$product->tags);

【讨论】：

【解决方案2】：

我自己在 JQueryUI Documentation

我不得不操作 renderItem() 扩展点。
这是我现在的脚本，工作得很好：

<script>
$(function()
{
     $( "#search_text" ).autocomplete({
      source: "{{ route('searchajax') }}",
      minLength: 1,
      select: function(event, ui) {
        $('#search_text').val(ui.item.value);

      return false;
      },
    open : function(){
      $(".ui-autocomplete:visible").css({top:"+=13"});
    },
    })
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div><strong>" + item.value + "</strong><br>" + item.company + "</div>" )
      .appendTo( ul );
  };
});

【讨论】：