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

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

然后您将不得不稍微更改自动完成功能。为此，您可以使用category autocomplete 示例。

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