Javascript 自动完成搜索的说明-Laravel

如果有人能逐步向我解释代码背后的逻辑，特别是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>  

我的剧本：

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

    }); 

$（文档）.ready（函数（）{
$（“#搜索框”）.keyup（函数（）{
var userText=$.trim（$（this.val（））；
$.ajax({
url:root+'/api/search'，//var root='{{url（“/”）}}'；
键入：“获取”，
数据类型：“json”，
contentType:“application/x-www-form-urlencoded；charset=utf-8”，
数据：{search:userText}，
成功：功能（响应）{
如果（答复）{
var autoList='
'；
$。每个（响应、功能（键、val）{
自动列表+='
；
自动列表+=''；
自动列表+='
'；
});
自动列表+='
'；
$（'div.search-info'）.html（自动列表）.fadeIn（500）；
}否则{
$（'div.search-info'）。淡出（500）；
}
}
});
});
$（“#搜索框”）.focusout（函数（）{
如果（！$（'div.search-info'）是（“：hover”））{
$（'div.search-info'）。淡出（200）；
}
});
}); 

---

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

这会在键入searchbox时触发一个函数：

$（'#searchbox'）.keyup（函数（）{

将searchbox的值设置为变量usertext：

var userText=$.trim（$（this.val（））；

为ajax请求设置参数：

url:root+'/api/search'，//var root='{{url（“/”}}}'；
键入：“获取”，
数据类型：“json”，
contentType:“application/x-www-form-urlencoded；charset=utf-8”，
数据：{search:userText}，

将响应作为值为product table的json数据类型发送到ajax：

return response（）->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);

var autoList='
；
$。每个（响应、功能（键、val）{
自动列表+='
；
自动列表+=''；
自动列表+='
'；
});
自动列表+='
'；
$（'div.search-info'）.html（自动列表）.fadeIn（500）；

谢谢。但是我仍然不理解带有$.each（response，function（key，val）{…}的部分。键是什么，值是什么？就像foreach函数，key-mean-index（在本例中是列名）好的，明白了。这部分呢：$（'#searchbox'）.focusout（函数（）{if（！$（'div.search-info'）。是（“：hover”））{$（'div.search-info'）.fadeOut（200）；}它的作用是什么？它的jquery函数只用于动画

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