Как правильно иметь автозаполнение поискового ввода с несколькими фильтрами?

Question

У меня есть контекст, где есть таблица конференций, в которой хранятся конференции.В таблице конференции есть столбец «имя», а также столбец «город».

У меня есть текст ввода типа, и пользователь должен иметь возможность искать названия конференций, а также конференции, которые будут происходить в определенном городе..

Чтобы объяснить лучше: пользователь вводит «Ne» во входном тексте, поэтому должны отображаться результаты, относящиеся как к названиям конференций, так и к названиям городов. Если пользователь нажимает на название конференции, он долженперенаправляется на страницу сведений о конференции. Если он щелкает по городу, в столбце «город» таблицы конференций должны отображаться конференции, для которых в качестве значения выбран город.

Знаете ли вы, как этого можно достичь? На данный момент выполняется только часть отображения конференций в поиске ввода.

Я создал AutocompleteController для этого контекста:

class AutocompleteController extends Controller
{

    public function search(Request $request){
        $search = $request->term;
        $conferences = Conference::where('name', 'LIKE', '%'.$search.'%')->get();

        $data= [];
        foreach ($conferences as $key => $value){
            $data[] = ['id'=> $value->id, 'value' => $value->name . " " . $value->name];
        }
        return response($data);
    }
}

Путь к указанному выше методу:

Route::get('/autocomplete-search', 'AutocompleteController@search');

jQuery:

$("#search").autocomplete({
   source: "{{ URL::to('autocomplete-search') }}",
   minLength: 2,
   select:function(key, value)
   {
       console.log(value);
   }
});

Ввод поиска:

<div class="col col-md-6">
    <h4 class="text-white  text-center font-weight-bold">Search</h4>
    <form class="main-search">
        <input type="text" id="search" class="autocomplete dropdown-toggle" placeholder="Conference, Citiy, Category">
    </form>
</div>

Таблица конференций:

   conferences table

    id | name | city | ...

     1 |  New conference 1  | Newcastle
     2 |  New conference 2  | Newcastle
     3 |  old conference 1  | Bristol
     4 |  old conference 2  | Glasgow

Answer 1

Вам придется искать города и добавлять свойство категории к данным, которые вы отправляете в автозаполнение.

Я не совсем знаком с доступом к базе данных, поэтому извинения, если ниже не верно на 100%.

class AutocompleteController extends Controller
{

    public function search(Request $request){
        $search = $request->term;
        $conferences = Conference::where('name', 'LIKE', '%'.$search.'%')->get();

        $cities = Conference::where('city', 'LIKE', '%'.$search.'%')->get();

        $data= [];
        foreach ($conferences as $key => $value){
            $data[] = ['category'=> 'Conference', 'value' => $value->name, 'url' = 'conferenceUrl'];
        }

        foreach ($cities as $key => $value){
            $data[] = ['category'=> 'City', 'value' => $value->city, 'url' = 'cityUrl'];
        }
        return response($data);
    }
}

Тогда вам придется немного изменить автозаполнение.Для этого вы можете использовать категорию автозаполнения пример.

$.widget( "custom.catcomplete", $.ui.autocomplete, {
      _create: function() {
          this._super();
          this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
      },
      _renderMenu: function( ul, items ) {
        var that = this,
          currentCategory = "";
        $.each( items, function( index, item ) {
          var li;
          if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
            currentCategory = item.category;
          }
          li = that._renderItemData( ul, item );
          if ( item.category ) {
            li.attr( "aria-label", item.category + " : " + item.label );
          }
        });
      }
    });


$("#autocomplete").catcomplete({
  source: [{
      value: "New conference abcd",
      label: "New conference abcd",
      url: "NewConferenceUrl",
      category: "Conference"
    },
    {
      value: "Newcastle",
      label: "Newcastle",
      url: "NewcastleUrl",
      category: "City"
    }
  ],
  select: function(event, ui) {
    console.log("Redirecting to " + ui.item.category + ": " + ui.item.url);
  }
});

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">

<div>
  <input id="autocomplete">
</div>