如何使用多个过滤器正确拥有自动完成搜索输入？

Question

I have a context where there is a conferences table that stores the conferences. The conference table has a column "name" and also a column city".

I have an input type text and the user should be able to search for conference names but also for conferences that will happen in a specific city.

To explain better: The user enters "Ne" in the input text. So it should appear the results relative to conference names but also city names. If the user clicks in the name of a conference he should be redirected to the conference details page. If he clicks in a city should appear the conferences that have the clicked city as a value in the column "city" of the conferences table.

Do you know how this can be achieved? For now, is just working the part of appearing the conferences in the input search.

I created an AutocompleteController for this context:

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 to above method:

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

jQuery:

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

Search input:

<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:

   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

You will have to search for cities and add category property to the data you are sending to your autocomplete.

I am not entirely familiar with database access so apology if bellow is not 100% correct.

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);
    }
}

Then you will have to slightly alter autocomplete. For that you can use category autocomplete example.

$.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>

</div>