JQuery autocomplete - отображать несколько значений

Question

Я хочу отобразить несколько значений в поле автозаполнения.
В моем понимании автозаполнение 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 для этого проекта.

Answer 1

Я сам нашел решение с помощью Документация JQueryUI

Мне пришлось манипулировать точкой расширения 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 );
  };
});

Answer 2

не проще ли манипулировать серверной частью поля 'value', чтобы получить желаемый результат? например вот так

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