html Laravel自动完成搜索

Posted 2021-05-10

http://oneordinaryblog.com/php-laravel/laravel-search-autocomplete-typeheadjs

HTML+BOOTSTRAP
<form action="{{ route('video.search') }}" method="get" name="main_search_form" class="navbar-form">

  <div class="input-group">
 
      <input autocomplete="off" type="text" placeholder="Search videos" class="form-control" name="video_search" id="video_search">
      <span class="input-group-btn">
      <button type="submit"  id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                  </button>
      </span>
  </div>
  
</form>



===========================================================================
WEB.ROUTES
Route::get('/main-search-autocomplete', function(){
    return json_encode(DB::table('videos')->get()->all() );
});

// USER VIDEO SEARCH
Route::get('admin/videos/search', 'VideoController@search')->name('video.search') ;


===========================================================================
CONTROLLER:
public function search()
{
    $value = Input::get('video_search');
    // dd( $value ) ; 
    $videos = Video::where('youtube_name', 'LIKE', '%' . $value . '%')->limit(25)->get();
    return view('admin.videos.search')->with('value', $value)
                                      ->with('videos', $videos);
}


===========================================================================
JS:
$(document).ready(function() {
    $('#video_search').on('keyup', function(e){
        if(e.which == 13){
            $('#main_search_form').submit();
        }
    });
    $.get("/main-search-autocomplete", function(data){
        $("#video_search").typeahead({
            "items": "all", // Number of Items
            "source": data,
            "autoSelect": false,
            displayText: function(item){
                console.log('returning item: ' + item.youtube_name ) ;
                return item.youtube_name;
            },

            updater: function(item) {
              // %20 will also work for names with spaces
              // http://laratubedemo.test/admin/videos/search?video_search=Code+Geass+Op1
                window.location.href = '{{ route('video.search') }}?video_search=' + item.youtube_name.split(' ').join('+') ;
            }

        });
    },'json');
});