Laravel 显示 AJAX 调用 JSON 响应

Question

有一些数据从 AJAX 调用返回，并且无法在实时搜索页面上输出到屏幕

Laravel 控制器的样子

 // Live Search
    public function searching() {
        $search_keyword = $_POST['search_keyword'];
        $searchClients = DB::table('clients')->where('company', 'like', '%'.$search_keyword.'%')->get();
        return response()->json($searchClients);

    }

效果很好，数据正在返回，看起来像

0
:
{id: 58, company: "Havenkey Ltd", con: "2441", engaged: "n", industry: "", status: 27, location: 1444,…}
1
:
{id: 62, company: "V3 Recruitment Ltd", con: "", engaged: "n", industry: "", status: 27,…}

前端在下方，带有搜索框和一个结果 div 以显示结果 sin

<div class="col-lg-8" style="padding-top: 30px;">
    <i class="fa fa-dashboard"></i> <a href="{{URL::asset('/')}}">Dashboard</a> / Search Clients
    <div class="col-md-12">
        <br>
        <div class="col-md-6 col-md-offset-3">
            <form>
                <div class="form-group">
                    {{ csrf_field() }}
                    <label for="search">Search</label>
                    <input type="text" class="search_keyword" id="search" name="search" class="form-control" placeholder="Enter Clients Name">
                </div>
            </form>

            <div id="result">

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

</div>
<div class="col-lg-2" style="padding-top: 30px;">
    @include('partials.notepad')
</div>

而 JS 看起来是这样的

$(".search_keyword").keyup(function () {
    //setup before functions
    var typingTimer;                //timer identifier
    var doneTypingInterval = 5000;  //time in ms, 5 second for example
    var $input = $('#search');

//on keyup, start the countdown
    $input.on('keyup', function () {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    });

//on keydown, clear the countdown
    $input.on('keydown', function () {
        clearTimeout(typingTimer);
    });

//user is "finished typing," do something
    function doneTyping () {
        $.ajax({
            type: "POST",
            url: "/searching",
            data: dataString,
            cache: false,
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function (data) {
                if(data){
                    console.log('Here');
                    $('#result').html('');
                    $('#result').append('<select id="res"></select>');
                    $.each(data, function(i,val) {
                        $(document).find('#res').append(
                            $("<option>").text(val.company).val(val.id)
                    )
                });
    }else {
        alert('im not working');
    }
}
        });
    }
    return false;
});

因此，我在这里尝试实现的所有目标都是输出实时搜索结果，该结果将公司名称附加到列表中，可以在某些时候点击选择

Answer 1

首先，我们需要在用户输入完成后才发起ajax调用，这样就避免了对每个输入的字符都发起ajax调用。所以要实现这个机制，

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //here we will call the ajax function.
}

在您的 ajax 调用中，更改 success 回调，如下所述：

success: function (data) {
       if(data){
           console.log('Here');
           $('#result').html('');
           $('#result').append('<select id="res"></select>');
           $.each(data, function(i,val) {
                $(document).find('#res').append(
                $("<option>").text(val.company).val(val.id);
                });
           });
       }else {
           alert('im not working');
       }
}