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

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

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/

Laravel Live Search AJAX Eloquent Clickable Items

1 个答案: