一个下拉可编辑的

<x-app-layout title="Vip Lian Lian Card Lock">
    <div class="max-w-8xl mx-auto p-8 bg-white">
        <x-score-card.blue-header>{{ __('Vip Lian Lian Card Lock') }}</x-score-card.blue-header>
        @can('view-lianlian-card-lock')
        <form id="card-lock-form">
            @csrf
            <div class="md:grid grid-cols-12 col-span-full gap-x-2 gap-y-2 sm:gay-y-0 py-4">
                <div class="col-span-2">
                    <x-label for="company_id" class="pt-2">{{ __('Company Name:') }}</x-label>
                </div>
                <div class="col-span-5 w-full">
                    <x-select id="company_id" name="company_id" value="{{ old('company_id') }}" class="w-full">
                        @foreach ($companyList as $company)
                        <option value="{{ $company['onboard_company_id'] }}" data-lluserid="{{ $company['lianlian_user_id'] }}" data-cardlist="{{ json_encode($company['cardList']) }}">{{ $company['company_name'] }}</option>
                        @endforeach
                    </x-select>
                    <x-small-text.danger class="company_id_error"></x-small-text.danger>
                </div>
                <div class="col-span-5"></div>
                <div class="col-span-2">
                    <x-label for="ll_user_id">{{ __('LL User ID:') }}</x-label>
                </div>
                <div class="col-span-5 w-full">
                    <x-input id="ll_user_id" name="ll_user_id" value="{{ old('ll_user_id') }}" readonly></x-input>
                    <x-small-text.danger class="ll_user_id_error"></x-small-text.danger>
                </div>
                <div class="col-span-5"></div>
                <div class="col-span-2">
                    <x-label for="card_no">{{ __('Card No.:') }}</x-label>
                </div>
                <div class="col-span-5 w-full">
                    <x-input id="card_no" name="card_no" value="{{ old('card_no') }}" class="w-full"></x-input>
                    <x-small-text.danger class="card_no_error"></x-small-text.danger>
                </div>
                <x-input id="card_id" name="card_id" value="{{ old('card_id') }}" class="w-full" type="hidden"></x-input>
                <x-button.normal type="button" style="height:42px;">{{ __('SUBMIT') }}</x-button.normal>
            </div>
        </form>
        @endcan
        <div class="flex flex-col bg-white overflow-hidden sm:rounded-lg p-2 shadow-md">
            <table id="card-lock-datatable" class="display nowrap" width="100%">
                <x-thead :headers="Constants::LIANLIAN_CARD_LOCK"></x-thead>
            </table>
        </div>
    </div>
</x-app-layout>
<script>
    $(document).ready(function() {
        $('#card-lock-datatable').DataTable({
            language: {
                "processing": "{{__('processing...')}}",
                "loadingRecords": "{{__('Loading...')}}",
                "lengthMenu": "{{__('Show _MENU_ entries')}}",
                "zeroRecords": "{{__('No matching records found')}}",
                "info": "{{__('Showing _START_ to _END_ of _TOTAL_ entries')}}",
                "infoEmpty": "{{__('Showing 0 to 0 of 0 entries')}}",
                "infoFiltered": "(filter from _MAX_ items)",
                "infoPostFix": "",
                "search": "{{__('Search')}}:",
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "{{__('Next')}}",
                    "previous": "{{__('Previous')}}"
                },
                "searchPlaceholder": "Company ID, Company Name"
            },
            ajax: {
                url: "/vip/lianlian/getCardLockList",
                type: "POST",
                dataType: "JSON"
            },
            columns: [{
                    data: 'id',
                    name: 'id',
                    visible: false
                },
                {
                    data: 'ap_cid',
                    name: 'ap_cid',
                },
                {
                    data: 'company_name',
                    name: 'company_name',
                },
                {
                    data: 'lianlian_user_id',
                    name: 'lianlian_user_id',
                },
                {
                    data: 'vip_user_id',
                    name: 'vip_user_id',
                },
                {
                    data: 'currency',
                    name: 'currency',
                },
                {
                    data: 'card_no',
                    name: 'card_no',
                },
                {
                    data: 'status',
                    name: 'status',
                    responsivePriority: 3,
                    "orderable": false,
                },
                {
                    data: 'submitted_by',
                    name: 'submitted_by',
                },
                {
                    data: 'submission_time',
                    name: 'submission_time',
                },
                {
                    data: 'last_update',
                    name: 'last_update',
                }
            ],
            order: [
                [0, "desc"]
            ],
            responsive: true,
            serverSide: true,
            processing: true,
            retrieve: true,
            lengthMenu: [10, 15, 50, 100],
            pageLength: 15,
            initComplete: function(settings, json) {
                this.api()
                    .columns(7)
                    .every(function() {
                        var column = this;
                        var select = $("[name='Status']")
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                var text = $(this).find("option:selected").data("text");
                                column.search('card_status', val ? val : false, false).draw();
                            });
                    });
            },

        });
    });

    $('#company_id').change(function() {
        var selectedOption = $(this).find('option:selected');
        var cardList = JSON.parse(selectedOption.attr('data-cardlist'));
        var llUserId = selectedOption.attr('data-lluserid');
        // 设置card_id值为空
        $('#card_id').val('');
        // 清空card_no的选项
        $('#card_no').empty();
        $('#ll_user_id').val(llUserId);
        $('#ll_user_id').prop('readonly', true);
        // 添加cardList数据到card_no的选项
        $('#card_no').autocomplete({
            source: cardList.map(function(card) {
                console.log(card);
                return {
                    label: card.card_no,
                    value: card.card_no,
                    card_id: card.id // 添加card_id为自定义属性
                };
            }),
            minLength: 0,
            select: function(event, ui) {
                console.log(event);
                console.log(ui);
                // 当用户选择一个选项时执行的操作
                var selectedOption = ui.item.value;
                var selectedCardId = ui.item.card_id; // 获取选中的card_id
                $('#card_id').val(selectedCardId); // 将选中的card_id赋值给$('#card_id')
                // 在此处执行您的操作
            }
        }).focus(function() {
            // 当<input>元素获得焦点时显示自动完成列表
            $(this).autocomplete('search', '');
        });
    });

    $('#card-lock-form button[type=button]').on('click', function(e) {
        e.preventDefault()
        let company_id = $('#company_id :selected').val();
        let ll_user_id = $('#ll_user_id').val();
        let card_id = $('#card_id').val();
        let card_no = $('#card_no').val();
        if (!company_id) {
            $('#company_id').addClass('border-red-500');
            $('#ll_user_id').removeClass('border-red-500');
            $('#card_no').removeClass('border-red-500');
            $('.company_id_error').text('Company Name is required');
            $('.ll_user_id_error').text('');
            $('.card_no_error').text('');
            return false;
        }
        if (!ll_user_id) {
            $('#company_id').removeClass('border-red-500');
            $('#ll_user_id').addClass('border-red-500');
            $('#card_no').removeClass('border-red-500');
            $('.company_id_error').text('');
            $('.ll_user_id_error').text('LL User ID not obtained!');
            $('.card_no_error').text('');
            return false;
        }
        if (!card_no) {
            $('#company_id').removeClass('border-red-500');
            $('#ll_user_id').removeClass('border-red-500');
            $('#card_no').addClass('border-red-500');
            $('.company_id_error').text('');
            $('.ll_user_id_error').text('');
            $('.card_no_error').text('Card No. not obtained!');
            return false;
        }
        if (!card_id) {
            $('#company_id').removeClass('border-red-500');
            $('#ll_user_id').removeClass('border-red-500');
            $('#card_no').addClass('border-red-500');
            $('.company_id_error').text('');
            $('.ll_user_id_error').text('');
            $('.card_no_error').text('Card ID not obtained!');
            return false;
        }
        if (!/^[a-zA-Z0-9]+$/.test(card_no)) {
            $('#company_id').removeClass('border-red-500');
            $('#ll_user_id').removeClass('border-red-500');
            $('#card_no').addClass('border-red-500');
            $('.company_id_error').text('');
            $('.ll_user_id_error').text('');
            $('.card_no_error').text('Card No. only input numbers and letters');
            return false;
        }
        $.ajax({
                url: "/tabf-i-monitoring/lianlian/submitNewCompany",
                method: 'post',
                data: {
                    company_id: company_id,
                    ll_user_id: ll_user_id,
                    card_id: card_id,
                    card_no: card_no,
                },
                beforeSend: function(xhr) {
                    $("#loadingAnimation").show();

                    $('#company_id').removeClass('border-red-500');
                    $('#ll_user_id').removeClass('border-red-500');
                    $('#card_no').removeClass('border-red-500');

                    $('.company_id_error').text('');
                    $('.ll_user_id_error').text('');
                    $('.card_no_error').text('');
                }
            })
            .done(function(response) {
                iztoastNotice('Submit Success');
                setTimeout(function() {
                    clearInputCoefficient();
                    location.reload();
                }, 1000);
            })
            .fail(function(response) {
                if (response.status == 422) {
                    var errors = $.parseJSON(response.responseText);
                    $.each(errors.errors, function(key, value) {
                        $('#' + key).addClass('border-red-500');
                        $('.' + key + '_error').text(value);
                    });
                } else {
                    iztoastError(response.responseJSON.message);
                }
            })
            .always(function() {
                $("#loadingAnimation").hide();
            });
    });
</script>