自动填充搜索的说明 - Laravel

Question

如果有人能够逐步解释代码背后的逻辑，特别是ajax部分，我将非常感激。代码确实有效，但我不太了解所有细节。

我的路线：

Route::get('api/search', 'ApiSearchController@index');  

我的观点：

   <ul class="nav navbar-nav navbar-right">
                                    <li>

                                        <form class="navbar-form" role="search" autocomplete="off">
                                            <div class="form-group" style="width: 240px;">
                                                <input type="search" id="searchbox" name="search" placeholder="Search products or categories..." class="form-control" style="min-width: 240px;"></input>
                                            </div>
                                            <div style="position: absolute;margin: 0 auto;padding: 5px; ">
                                                <div class="search-info"></div>
                                            </div>
                                        </form>


                                    </li>
                                </ul>  

我的控制器：

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
use App\Categorie;
use DB;
use Illuminate\Support\Facades\Input;
class ApiSearchController extends MainController {


   public function index()
{ 


    $input = Input::all();
    $query = $input['search'];


    if(!$query && $query == '') return response()->json(array(), 400);


    $products2 = DB::table('products')
        ->join('categories', 'products.categorie_id', '=', 'categories.id')
        ->select('products.*', 'categories.id as idcat', 'categories.url as urlcat')
        ->where('products.title', 'like', "%$query%")
        ->orwhere('products.url', 'like', "%$query%")
        ->take(5)
        ->get()
        ->toArray();



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

我的剧本：

 $(document).ready(function () {

        $('#searchbox').keyup(function () {

            var userText = $.trim($(this).val());

                $.ajax({
                    url: root+'/api/search',//  var root = '{{url("/")}}';
                    type: "GET",
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    data: {search: userText},
                    success: function (response) {

                        if (response) {

                            var autoList = '<ul class="srechajax">';

                            $.each(response, function (key, val) {
                                autoList += '  <li class="hovers">';
                                autoList += '  <a href="'+root +'/shop/'+ val.urlcat +'/'+val.url+'"><img src="'+ root + '/images/' + val.image + '"><div>' + val.title + '</div></a>';
                                autoList += '  </li>';


                            });

                            autoList += '</ul>';
                            $('div.search-info').html(autoList).fadeIn(500);

                        } else {

                            $('div.search-info').fadeOut(500);

                        }

                    }
                });

        });

        $('#searchbox').focusout(function () {
            if (!$('div.search-info').is(":hover")) {
                $('div.search-info').fadeOut(200);
            }
        });

    }); 

如果有人能够逐步解释代码背后的逻辑，特别是ajax部分，我将非常感激。代码确实有效，但我不太了解所有细节。

Answer 1

这会在搜索框输入时触发一个函数： <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> <div id="datecontent" class="owl-demo"> </div>

将搜索框的值设置为变量usertext：

$('#searchbox').keyup(function () {

为ajax请求设置params：

var userText = $.trim($(this).val());

将响应作为json dataType发送给ajax，其值为product table：

url: root+'/api/search',// var root = '{{url("/")}}'; type: "GET", dataType: "json", contentType: "application/x-www-form-urlencoded;charset=utf-8", data: {search: userText},

如果成功运行函数并将products2的数据设置为变量响应：

return response()->json($products2);

这将响应的值设置为html：

success: function (response) {