Как получить данные из запроса AJAX и отобразить их в текстовом поле?

Question

У меня есть автозаполнение ajax запроса. он создает раскрывающийся список результатов и, как только вы нажмете на результат, захватывается текстовым полем. Вот снимок экрана

снимок экрана после того, как я щелкну раскрывающийся элемент

но, как вы можете видеть, текстовое поле идентификатора поставщика не заполнено. Я хочу также заполнить текстовое поле идентификатора поставщика с помощью идентификатора поставщика из запроса.

от My controller

public function search(Request $request){
    if($request->ajax()) {
        $data = Vendor::where('vendor_id', 'LIKE', $request->vendor.'%')
            ->get();
        $output = '';

        if (count($data)>0) {
            $output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
            foreach ($data as $row){
                $output .= '<li class="list-group-item">'.$row->vendor_name.'</li>';
            }
            $output .= '</ul>';
        }
        else {
            $output .= '<li class="list-group-item">'.'No results'.'</li>';
        }
        return $output;
    }
}

MY BLADE

<input type="text" name="vendor_id" id="vendor_id" data-type="vendor_id" placeholder="Enter vendor ID" class="form-control autocomplete_txt">
<div id="vendor_list"></div>

<input type="text" name="vendor_name" id="vendor_name" placeholder="Vendor Name" class="form-control" readonly="true">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#vendor_id').on('keyup',function() {
                var query = $(this).val();
                $.ajax({
                    url:"{{ route('admin.search') }}",
                    type:"GET",
                    data:{'vendor':query},
                    success:function (data) {
                        $('#vendor_list').html(data);
                    }
                })
            });

            $(document).on('click', 'li', function(){
                var value = $(this).text();
                $('#vendor_name').val(value);
                $('#vendor_list').html("");
            });
        });
    </script>

таблица поставщиков

Как этого добиться? Надеюсь, ты сможешь мне помочь. Заранее большое спасибо!

Answer 1

Измените свой код контроллера следующим образом:

   public function search(Request $request){
    if($request->ajax()) {
        $data = Vendor::where('vendor_id', 'LIKE', $request->vendor.'%')
            ->get();
        $output = '';

        if (count($data)>0) {
            $output = '<ul class="list-group" style="display: block; position: relative; z-index: 1">';
            foreach ($data as $row){
                $output .= '<li class="list-group-item" id="'.$row->vendor_id.'">'.$row->vendor_name.'</li>';
            }
            $output .= '</ul>';
        }
        else {
            $output .= '<li class="list-group-item">'.'No results'.'</li>';
        }
        return $output;
    }
}

И Jquery вот так:

$(document).ready(function () {
    $('#vendor_id').on('keyup',function() {
        var query = $(this).val();
        $.ajax({
            url:"{{ route('admin.search') }}",
            type:"GET",
            data:{'vendor':query},
            success:function (data) {
                $('#vendor_list').html(data);
            }
        })
    });

    $(document).on('click', 'li', function(){
        var value = $(this).text();
        var id = $(this).attr('id');
        $('#vendor_name').val(value);
        $('#vendor_id').val(id);
        $('#vendor_list').html("");
    });
});

Это обновленный код. проверить один раз