Laravel/AJAX-Suchleiste

Question

Hallo Ich kann einen Standard AJAX/PHP-Suche, aber finde es schwer zu Laravel zu konvertieren. Ich benutze die Taste nach oben anstelle von einem Klick. Ich bin nicht sicher, ob dies der richtige Weg ist, eine Ajax/Laravel-Suchleiste zu implementieren. Ich schaue, um die Datenbankdaten in das div auf der Ansichtseite auszugeben, aber benötige Hilfe, um das zu tun. Wenn jemand denkt, dass ich das falsch mache, rate mir bitte. Immer bereit, neuen Code zu lernen.

Controller:

<?php 

namespace App\Http\Controllers; 

use App\Patient; 

use DB; 

use Illuminate\Http\Request; 

class PatientController extends Controller 
{ 


public function search(Request $request) { 
    // get the search term 
    $text = $request->input('text'); 

    // search the members table 
    $patients = DB::table('patients')->where('firstname', 'Like', $text)->get(); 


    // return the results 
    return response()->json($patients); 
} 

} 

Route:

Route::get('search', 'PatientController@search'); 

Ausblick:

@extends('Layout.master') 


@section('content') 


    <!-- Ajax code --> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 


    <script type="application/javascript"> 
    $(document).ready(function(){ 

     $('#txtSearch').on('keyup', function(){ 

      var text = $('#txtSearch').val(); 

      $.ajax({ 

       type:"GET", 
       url: '127.0.0.1:8000/search', 
       data: {text: $('#txtSearch').val()}, 
       success: function(data) { 

        console.log(data); 

       } 



      }); 


     }); 

    }); 
    </script> 

    <div style="margin-top:70px;"></div> 


     @include('partials._side') 

    <div class="container"> 

        <form method="get" action=""> 

        <div class="input-group stylish-input-group"> 
         <input type="text" id="txtSearch" name="txtSearch" class="form-control" placeholder="Search..." > 
         <span class="input-group-addon"> 
          <button type="submit"> 
           <span class="glyphicon glyphicon-search"></span> 
          </button> 
         </span> 
        </div> 

        </form> 


      <div id="result"></div> 

</div> 

@endsection 

Answer 1

In Ihrem AJAX Anfrage ändern:

'127.0.0.1:8000/search' 

zu

'/search' 

empfehle ich Ihnen jQuery Autocomplete

Sehr einfach einzurichten zu verwenden.

Check out the API documentation.

Answer 2

Je nach Ihrer Version von Laravel (neue Versionen verwenden diese):

use Illuminate\Http\Request; 

public function search(Request $request) { 
    $text = $request->input('text'); 

    $patients = DB::table('patients')->where('firstname', 'Like', "$text")->get(); 

    return response()->json($patients); 
} 

Und dann in javascript:

$(document).ready(function(){ 

    $('#txtSearch').on('keyup', function(){ 

     var text = $('#txtSearch').val(); 

     $.ajax({ 

      type:"GET", 
      url: 'search', 
      data: {text: $('#txtSearch').val()}, 
      success: function(response) { 
       response = JSON.parse(response); 
       for (var patient of response) { 
        console.log(patient); 
       } 
      } 



     }); 


    }); 

}); 

https://laravel.com/docs/5.1/requests#retrieving-input.

Answer 3

Wenn Sie Ergebnis in Browser bedeuten umgeht, erhalten Sie in Ihrem AJAX überprüfen mit jQuery codiert, „Antwort“ Variable ist die Server-Daten kommen zurück. Sie müssen nur die zurückgegebenen Daten in Ihre Seite füllen, nachdem AJAX beendet wurde.

Zum Beispiel in

setzen

<div id="searchResult"></div> 

Sie müssen unten in Ihrem Ajax setzen nach Reaktion mit jquery wie Rückwegs:

$("#searchResult").html(response);