Suchleiste in Laravel

Question

Ich bin neu bei Laravel und ich möchte eine Suchleiste in meiner Sicht erstellen, die aus meiner Datenbank suchen wird und Ergebnisse in der Ansicht anzeigen wird. Ich habe eine Verwirrung, wenn ich eine Form erstelle, was die Wirkung meiner Form sein wird. Bitte sagen Sie mir, was ich von meiner Form schreiben soll.

Answer 1

Hier ist ein einfaches Beispiel, bei dem "Film" als Modell verwendet wird. Dies verwendet Bilder der Filmplakate in der Live-Suche, aber Sie werden die Idee bekommen. Im Grunde ersetzen die Suchergebnisse einen Teil Ihres html - das könnte eine Tabellenzeile oder, wie in diesem Beispiel, eine Bootstrap-Spalte sein.

Routen-Datei (web.php):

Route::get('movies/search', 'MovieController@search')->name('movies.search'); 
Route::get('search-results', 'MovieController@search_results'); 

MovieController.php

/** 
    * Search. 
    */ 
    public function search() 
    { 
     $movies = Movie::orderBy('name', 'asc')->get(); 
     return view('movies.search')->with('movies', $movies); 
    } 
    /** 
    * Live search results. 
    */ 
    public function search_results(Request $request) 
    { 
     if ($request->ajax()) 
     { 
      $movies = Movie::with('cinemas')->where('name', 'LIKE', '%' . $request->results . '%') 
       ->orWhereHas('cinemas', function ($q) use ($request) 
       { 
        $q->where('name', 'LIKE', '%' . $request->results . '%'); 
       })->orderBy('name', 'asc') 
       ->get(); 
      if ($movies) 
       $results = ''; 
      foreach ($movies as $movie) 
      { 
       $results .= '<div class="col-md-2"> 
           <div class="thumbnail" data-toggle="tooltip" data-placement="top" title="" 
            data-original-title="' . $movie->name . '"><a href="'.route('movies.show', ['id' => $movie->id]).'"><img src="' . url($movie->poster) . '" alt="' . $movie->name . '" 
              style="width:100%"/></a></div></div>'; 
      } 
      return Response($results); 
     } 
    } 

Ansicht (search.blade.php)

@extends('layouts.app') 

@section('title', 'Search') 

@section('content') 

    <div class="container"> 
     <div class="bs-docs-section"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="page-header"> 
         <h1 id="navs">Search</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="bs-docs-section"> 
      <div class="row"> 
       <div class="col-lg-10 col-lg-offset-1"> 
        <div class="form-group"> 
         {{ Form::text('search', null, array('autofocus', 'class'=>'form-control', 'id'=>'search', 'name'=>'search','placeholder'=>'Search by movie title or cinema name')) }} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="bs-docs-section"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="bs-component"> 
         @foreach ($movies as $movie) 
          <div class="col-md-2"> 
           <div class="thumbnail" data-toggle="tooltip" data-placement="top" title="" 
            data-original-title="{{ $movie->name }}"> 
            <a href="{{ url('/movies') }}/{{ $movie->id }}"> 
             <img src="{{ url($movie->poster) }}" alt="{{ $movie->name }}" 
              style="width:100%"/> 
            </a> 
           </div> 
          </div> 
         @endforeach 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
@endsection 

@section('scripts') 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#search").trigger('keyup'); 
    }); 
    $('#search').on('keyup', function() { 
     $value = $(this).val(); 
     $.ajax({ 
      type : 'get', 
      url : '{{ URL::to('/search-results') }}', 
      data : {'results': $value}, 
      success: function (data) { 
       if (data) { 
        $('.bs-component').html(data); 
       } else { 
        $('.bs-component').html('<div class="col-md-10 col-md-offset-1">There are no movie titles or cinema names matching your search criteria.</div'); 
       } 
      } 
     }); 
    }); 
</script> 
@endsection