Ajax 自动完成在 Laravel 6 中无法正常工作

Question

我看到了一个关于 AJAX 自动完成的教程，它看起来不错，但问题是它还显示所有数据，而不是我正在搜索的数据。

抱歉，我是 ajax 的新手，您能帮我解决这个问题吗？

来自我的控制器

public function search(Request $request){
    // check if ajax request is coming or not
    if($request->ajax()) {
        // select country name from database
        $data = Vendor::where('vendor_id', 'LIKE', '%'.$request->vendor_id.'%')
            ->get();
        // declare an empty array for output
        $output = '';
        // if searched countries count is larager than zero
        if (count($data)>0) {
            // concatenate output to the array
            $output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
            // loop through the result array
            foreach ($data as $row){
                // concatenate output to the array
                $output .= '<li class="list-group-item">'.$row->vendor_id. ' ' .$row->vendor_name.'</li>';
            }
            // end of output
            $output .= '</ul>';
        }
        else {
            // if there's no matching results according to the input
            $output .= '<li class="list-group-item">'.'No results'.'</li>';
        }
        // return output result array
        return $output;
    }
}

我的刀刃

    <div class="row">
        <div class="col-lg-12"></div>
        <div class="col-lg-6">
            <div class="form-group">
                <input type="text" name="vendor_id" id="vendor_id" data-type="vendor_id" placeholder="Enter vendor ID" class="form-control autocomplete_txt">
                {{-- <input class="typeahead form-control" type="text"> --}}
            </div>
            <div id="vendor_list"></div>
        </div>
        <div class="col-lg-6">
            <div class="form-group">
                <input type="text" name="vendor_name" id="vendor_name" placeholder="Vendor Name" class="form-control" readonly="true">
            </div>                    
        </div>                
        <div class="col-lg-12"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script type="text/javascript">
        // jQuery wait till the page is fullt loaded
        $(document).ready(function () {
            // keyup function looks at the keys typed on the search box
            $('#vendor_id').on('keyup',function() {
                // the text typed in the input field is assigned to a variable 
                var query = $(this).val();
                // call to an ajax function
                $.ajax({
                    // assign a controller function to perform search action - route name is search
                    url:"{{ route('admin.search') }}",
                    // since we are getting data methos is assigned as GET
                    type:"GET",
                    // data are sent the server
                    data:{'vendor':query},
                    // if search is succcessfully done, this callback function is called
                    success:function (data) {
                        // print the search results in the div called vendor_list(id)
                        $('#vendor_list').html(data);
                    }
                })
                // end of ajax call
            });

            // initiate a click function on each search result
            $(document).on('click', 'li', function(){
                // declare the value in the input field to a variable
                var value = $(this).text();
                // assign the value to the search box
                $('#vendor_id').val(value);
                // after click is done, search results segment is made empty
                $('#vendor_list').html("");
            });
        });
    </script>

路线

Route::get('search', 'PurchasedOrderController@search')->name('search');

你能帮我修复下拉列表并在触发此点击代码后在供应商名称输入字段上显示 vendor_name 吗？提前致谢！！！

Answer 1

对我来说，你的问题来自于你的控制器，你也需要一个 post 请求，或者留在 get 中并像那样做。

控制器

public function search(Request $request, $vendor){
// check if ajax request is coming or not
if($request->ajax()) {
    // select country name from database
    $data = Vendor::where('vendor_id', 'LIKE', '%'.$vendor.'%')
        ->get();
    // declare an empty array for output
    $output = '';
    // if searched countries count is larager than zero
    if (count($data)>0) {
        // concatenate output to the array
        $output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
        // loop through the result array
        foreach ($data as $row){
            // concatenate output to the array
            $output .= '<li class="list-group-item">'.$row->vendor_id. ' ' .$row->vendor_name.'</li>';
        }
        // end of output
        $output .= '</ul>';
    }
    else {
        // if there's no matching results according to the input
        $output .= '<li class="list-group-item">'.'No results'.'</li>';
    }
    // return output result array
    return $output;
}}

你的路线

Route::get('search/{vendor}', 'PurchasedOrderController@search')->name('search');

你的blade

    $(document).ready(function () {
        // keyup function looks at the keys typed on the search box
        $('#vendor_id').on('keyup',function() {
            // the text typed in the input field is assigned to a variable 
            var query = $(this).val();
            // call to an ajax function
            $.ajax({
                url:"yourdomain.com/search/"+query,
                // since we are getting data methos is assigned as GET
                type:"GET",
                // if search is succcessfully done, this callback function is called
                success:function (data) {
                    // print the search results in the div called vendor_list(id)
                    $('#vendor_list').html(data);
                }
            })
            // end of ajax call
        });

它应该可以工作，但在 post 中也行不通你必须更改你的控制器你的 $request->vendor_id 它不好，更改为 $request->vendor 并通过你的路线 laravel 和 post 中的 ajax 请求，它应该工作

对于点击：

$('#list-group-item').on('click', function(){

    var item_select = $(this).text();
    $('#vendor_id').val(item_select);
    $('#vendor_list').html("");
 });

Ajax 自动完成在 Laravel 6 中无法正常工作

Ajax Autocomplete not working properly in Laravel 6

ajax

autocomplete

laravel