<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Staff</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="adminer.css" />

<script>
        $(document).ready(function() {
            $("#nama_suami").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "fetch_nama_lelaki.php",
                        type: "POST",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                minLength: 2, // Jumlah minimum karakter sebelum autocomplete mulai
                select: function(event, ui) {
                    $("#nama_suami").val(ui.item.value);
                    $.ajax({
                        url: "fetch_id_number.php",
                        type: "POST",
                        dataType: "json",
                        data: {
                            nama_lengkap: ui.item.value
                        },
                        success: function(data) {
                            $("#id_suami").val(data.id_number);
                        }
                    });
                    return false;
                }
            });
        });
    </script>