Question

我有一个上下文，其中有一个会议表存储会议。会议桌有一列＆＃34;名称＆＃34;还有一个专栏城市＆＃34;。

我有一个输入类型文本，用户应该能够搜索会议名称，但也可以搜索特定城市中发生的会议。

更好地解释：用户输入＆＃34; Ne＆＃34;在输入文本中。因此它应该显示相对于会议名称的结果，但也会显示城市名称。如果用户点击会议名称，则应将其重定向到会议详细信息页面。如果他点击某个城市，则会显示将所点击的城市作为值列在＆＃34; city＆＃34;会议桌。

你知道如何实现这一目标吗？目前，只是在输入搜索中出现会议的部分。

我为此上下文创建了一个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示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: