javascript - 自动完成搜索的说明 - 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>  

我的 Controller :

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

当输入搜索框时，这会触发一个函数: $('#searchbox').keyup(function () {

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

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

设置ajax请求的参数:

url: root+'/api/search',//var root = '{{url("/")}}'; 类型:“获取”， 数据类型:“json”， contentType: "application/x-www-form-urlencoded;charset=utf-8", 数据:{搜索:userText}，

将响应作为 json 数据类型发送到 ajax，其中包含产品表的值:

返回响应()->json($products2);

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

成功:函数(响应){

这将响应的值设置为 html :

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