How To Grab Data From An AJAX Query And Display Them On A Text Field?

I have this autocomplete ajax query. it create a dropdown list of the results and once you click the result is grab by a text field. here's the screenshot

screentshot after I click the drop down item

but as you can see, vendor id text field is not complete. What I want is to also populate the vendor id text field with vendor Id from the query.

from 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>

vendors table

How can I achieve this? Hope you can help me. Thank you so much in advance!

Change your code of controller like this:

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

And Jquery like this:

$(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("");
    });
});

This is updated code. check once