How to filled form by clicking search bar dropdown in Laravel?

I have created a search functionality in a component in Laravel which is showing the data from the MySQL database in a dropdown which I implement by using Typeahead Js using this website tutorial.

What I want is that when I click on one of the search result it should filled the below field related entries from the database.

I tried to do it by doing through AJAX , when it didn't workout I Tried to do it with Vue Axios(I linked all the required CDN links in my app file). But I'm new to both of these techs so don't know where I'm making the mistake.

My Laravel Version is 9 and Php is 7.4^(they are project requirements.). If anyone can guide me how to do it because I have failed many times. I used ChatGPT but it didn't workout as well.

This is the dropdown browser image as it's fetching the data

This is just the one section of the template I'm working right now

                <form method="POST" action="">
                    @csrf

                    
                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-align-justify"></i> 
                        </div>
                        <div class="card-body" id="app">
                            <div class="form-group row">
                                <label>Search CNIC</label>
                                <div class="input-group">
                                    <input class="form-control" type="text" placeholder=""
                                        name="ip_search_cnic" v-model='message' id="ip_cnic">
                                    <div class=" input-group-append">
                                        <button class="btn btn-primary" type="button" id="search_button"
                                            v-on:click=" searchInjuredPerson ">Search</button>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label>Name</label>
                                    <input class="form-control" type="text" placeholder=""
                                        name="ip_name" id="ip_name" v-model="injuredPerson.name" required     autofocus>
                                </div>

                                <div class="form-group row">
                                    <label>CNIC</label>
                                    <input class="form-control" type="text" placeholder=""
                                        name="ip_cnic" id="ip_cnic" v-model="injuredPerson.cnic" required autofocus>
                                </div>

                                <div class="form-group row">
                                    <label>Address</label>
                                    <textarea class="form-control" name="ip_address" rows="9" id="ip_address"
                                        placeholder="" v-model="injuredPerson.address"
                                        required></textarea>
                                </div>

                                <div class="form-group row">
                                    <label>Phone Number</label>
                                    <input class="form-control" type="tel" placeholder=""
                                        name="ip_phone_number" id="ip_phone_number" v-model="injuredPerson.phoneNumber"
                                        required autofocus>
                                </div>

                                <div class="form-group row">
                                    <label>Date of Birth</label>
                                    <input class="form-control" type="date" placeholder=""
                                        name="ip_date_of_birth" id="ip_date_of_birth"
                                        v-model="injuredPerson.dateOfBirth" required autofocus>
                                </div>

                                <div class="form-group row">
                                    <label>Age</label>
                                    <input class="form-control" type="number" name="ip_age" id="ip_age"
                                        placeholder="" v-model="injuredPerson.age" required autofocus>
                                </div>

                            </div>
                        </div>
                      </form>

I tried to do it with ajax and vue Axios multiple time . So don't know where's the problem . But this is the code for Ajax.

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    $(document).ready(function() {
// Handle search input keyup event
$('#searchInput').keyup(function() {
var searchCnic = $(this).val();

// Make an AJAX request to fetch matching injured persons
$.ajax({
url: '/incident/search',
type: 'POST',
data: { ip_cnic: searchCnic },
success: function(response) {
// Process the response and populate the dropdown list
var dropdownList = $('#searchResults');
dropdownList.empty();

$.each(response, function(index, injuredPerson) {
dropdownList.append($('
<option />', {
value: injuredPerson.id,
text: injuredPerson.cnic
}));
});
}
});
});

// Handle dropdown selection change event
$('#searchResults').change(function() {
var selectedInjuredPersonId = $(this).val();

// Fetch the injured person details using AJAX
$.ajax({
url: '/incident/' + selectedInjuredPersonId,
type: 'GET',
success: function(response) {
// Populate the form fields with the retrieved data
$('#ip_name').val(response.name);
$('#ip_cnic').val(response.cnic);
$('#ip_address').val(response.address);
$('#ip_phone_number').val(response.phone_number);
$('#ip_date_of_birth').val(response.date_of_birth);
$('#ip_age').val(response.age);
}
});
});
});
</script>


@endsection

The below is my web.php route

    //Showing dropdown for of fetched data by typehead
        Route::get('/home', [TypeaheadController::class, 'index']);
        Route::get('/autocomplete-search', [TypeaheadController::class, 'autocompleteSearch']);

   // For filling the form fields
        Route::post('incident/search', 'IncidentController@search')->name('incident.search');
        Route::get('incident/{injured_person}', 'IncidentController@showPerson')->name('incident.show');

The below code snippet is for my search controller

    public function search(Request $request)
    {
        $cnic = $request->input('ip_cnic');

        // Perform the search query
        $results = InjuredPerson::where('ip_cnic', 'LIKE', '%' . $cnic . '%')->get();

        return response()->json($results);
    }

    public function showPerson(InjuredPerson $injured_person)
    {
        return response()->json($injured_person);
    }

Kindly anyone can guide me how to do it.

Tried: I want to search some data in search bar , it showed a dropdown but when i clicked on it to fill the form field entries below. It did not workout.

Expect: I expect that when i click on the dropdown result and clicked on it should filled the form entries with the fetched data from the database.

source https://stackoverflow.com/questions/76296820/how-to-filled-form-by-clicking-search-bar-dropdown-in-laravel