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

JohnW 发表于 Dev

约翰·W

我有一个上下文，那里有一个存储会议的会议表。会议表具有“名称”列和“城市”列。

我有一个输入类型的文本，用户应该可以搜索会议名称，也可以搜索将在特定城市举行的会议。

为了更好地解释：用户在输入文本中输入“ 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

耶里波

您将必须搜索城市，并将类别属性添加到要发送到自动完成功能的数据中。

我对数据库访问并不完全熟悉，因此如果不能百分百正确地道歉，我深表歉意。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。