实施 Laravel/AJAX 搜索栏

Question

您好，我可以进行标准 AJAX/PHP 搜索，但发现很难转换为 Laravel。我正在使用向上键而不是单击按钮。我不确定这是否是我要实施 ajax/laravel 搜索栏的正确方法。我希望将数据库数据输出到视图页面的 div 中，但需要有关此操作的帮助。如果有人认为我做错了，请告诉我。总是愿意学习新代码。

控制器：

<?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::get('search', 'PatientController@search');

查看：

   @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

在您的 AJAX 请求中更改：

'127.0.0.1:8000/search'

至

'/search'

我建议你使用jQuery Autocomplete

非常容易设置。

Check out the API documentation.

Answer 2

取决于您的 Laravel 版本（新版本使用此）：

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

然后在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

如果你的意思是在浏览器中处理结果，请检查你用jQuery编码的AJAX，"response"变量是服务器返回数据。 AJAX 完成后，您只需将返回的数据填充到您的页面即可。

例如放入

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

您需要在回复 jquery 后将下面放在 ajax 中，例如：

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

实施 Laravel/AJAX 搜索栏

Implement Laravel/AJAX search bar

php

ajax

searchbar

laravel