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