使用Ajax在Laravel 5内部进行实时搜索 [英] Live Search inside Laravel 5 using Ajax

问题描述

我正在将一个项目转移到Laravel 5中.导航栏中有一个实时搜索功能，该功能会在您键入时列出数据库中的现有名称.

I'm transferring a project into Laravel 5. I have a live search feature inside the navbar that lists existing names in database as you type.

当我输入字母时，会调用Ajax内的url，但它会在网络检查中给出500错误.

When I type in a letter, the url inside Ajax is called but it gives a 500 error inside network inspect.

有人知道解决方案吗?

搜索输入:

<form action="/search" class="search_form" method="get" autocomplete="off">
                <div class="form-field">
                    <input type="text" name="s" class="search_keyword" id="search_keyword_id"
                           placeholder="Search the FTSE 100 & 250" required/>
                    <button type="submit" class="search_button" onclick="submitdata()">Search</button>
                    <div id="result">

                    </div>
                </div>
            </form>

JS脚本

<script type="text/javascript">
$(function () {
    $(".search_keyword").keyup(function () {
        var search_keyword_value = $(this).val();
        var dataString = 'search_keyword=' + search_keyword_value;
        if (search_keyword_value != '') {
            $.ajax({
                type: "POST",
                url: "/searching",
                data: dataString,
                cache: false,
                success: function (html) {
                    $("#result").html(html).show();
                }
            });
        }
        return false;
    });

    $("#result").live("click", function (e) {
        var $clicked = $(e.target);
        if (e.target.nodeName == "STRONG")
            $clicked = $(e.target).parent().parent();
        else if (e.target.nodeName == "SPAN")
            $clicked = $(e.target).parent();
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#search_keyword_id').val(decoded);
    });

    $(document).live("click", function (e) {
        var $clicked = $(e.target);
        if (!$clicked.hasClass("search_keyword")) {
            $("#result").fadeOut();
        }
    });

    $('#search_keyword_id').click(function () {
        $("#result").fadeIn();
    });
});

路由:

Route::post('/searching', 'SearchController@index');

搜索控制器中的索引功能:

class SearchController extends Controller
{
public function index()
{

    $search_keyword = $_POST['search_keyword'];

    $first_query = DB::table('ftse100')->select('name', 'symbol')->
    where('symbol', 'like', '%' . $search_keyword . '%')->orWhere('name', 'like', '%' . $search_keyword . '%');

    $query = DB::table('ftse250')->select('name', 'symbol')->
    where('symbol', 'like', '%' . $search_keyword . '%')->orWhere('name', 'like', '%' . $search_keyword . '%')
        ->union($first_query)->get();


    $bold_search_keyword = '<strong>' . $search_keyword . '</strong>';

    if ($query) {
        foreach ($query as $rows) {
            echo '<div class="show" align="left"><span class="name">' . str_ireplace
                ($search_keyword, $bold_search_keyword, $rows['name']) . '</span></div>';
        }
    } else {
        echo '<div class="show" align="left">No matching records.</div>';
    }

}

推荐答案

500错误表示您遇到服务器问题，因为路由看起来很简单，这表明它已出现在控制器中.

The 500 error means you have a server problem, since your routing looks fine and simple this suggests its in your controller.

您可以通过打开调试从应用程序中获取更多信息: https://laravel.com /docs/5.2/errors#configuration

You can get more information from the app by turning on debugging: https://laravel.com/docs/5.2/errors#configuration

错误可能是SearchController @ index正在回显内容，而不是返回内容(或更好的视图).

The error might be SearchController@index is echoing content, rather than returning it (or better a view).

Laravels响应类在您的控制器之后做了很多繁重的工作(例如，设置cookie和标头)，如果已经发送了内容，这可能会导致错误.

Laravels response class does a lot of heavy lifting after your controller (e.g. setting cookies and headers) that might cause errors if content has already been sent.

由于您的html非常简单，我建议将其移至视图并将数据传递至该视图.

Since your html is fairly simple here I would suggest moving it to a view and passing your data to that view.

当然要使用Joaquin Javi已经说过的csrf令牌.

And of course use a csrf-token as Joaquin Javi has already said.

这篇关于使用Ajax在Laravel 5内部进行实时搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！