Laravel Live Search AJAX Eloquent Clickable Items

Question

我按照 this 教程在 laravel 应用程序中使用 AJAX 和 Eloquent（访问数据库）创建实时搜索。现在我想知道，如何使搜索结果可点击，所以我点击的东西被输入到输入字段中。不知何故，只是添加一个点击处理程序，然后将.val() 设置为查询似乎不起作用（预计我犯了一个错误）... PS：我也在使用 jQuery。

我怎么能这样做？准确地说，这里是代码：

刀片模板：

<div id="content">
   <input type="search" name="keyword" placeholder="Search Names" id="searchbox">
   <div id="results"></div>
</div>

里面有JS（不用奇怪，我加了一个小东西，等待用户完成输入后再发送AJAX请求）：

$(document).ready(function () {
        var typingTimer;                //timer identifier
        var doneTypingInterval = 300;  //time in ms (5 seconds)

        $("#searchbox").on('keyup', function () {
            clearTimeout(typingTimer);
            if ($('#searchbox').val()) {
                typingTimer = setTimeout(doneTyping, doneTypingInterval);
            }
        });
    });

    //user is "finished typing," do something
    function doneTyping() {
        var key = $('#searchbox').val();

        if (key.length >= 3) {
            $.ajax({
                url: '/categorysearch/' + key,
                type: 'GET',
                beforeSend: function () {
                    $("#results").slideUp('fast');
                },
                success: function (data) {
                    $("#results").html(data);
                    $("#results").slideDown('fast');
                }
            });

   }
}

和php文件/函数处理：

public function Index(Request $request){
        $query = "%".$request->categorySearchTerm."%";
        $categories = Subcategory::where('name','LIKE',$query)->get();
        foreach($categories as $category){
            echo "<div id='item'>$category->name</div>";
        }
    }

现在我怎样才能得到我想要的，所以点击item会将item的内容放到输入字段中？

Answer 1

您可以尝试将类别添加为数据属性，以使用 jQuery 获取类似这样的内容：

public function Index(Request $request){
    $query = "%".$request->categorySearchTerm."%";
    $categories = Subcategory::where('name','LIKE',$query)->get();
    foreach($categories as $category){
        echo "<div id='item' data-name='$category->name'>$category->name</div>";
    }
}

然后您可以使用如下函数获取值并设置：

$(document).on('click', '#item', function() {
    $('input').val($(this).data('name'));
});

这里的想法有效：https://jsfiddle.net/yhwsy6x7/1/