Suggestions not showing inside Table Row (bootstrap, typeahead.js, laravel)

Question

As you can see in the below screenshot whenever I click on Add Dependents it would dynamically add a table row as shown in the screenshot. Inside the screenshot you can also see that when I type A the console does output 4 suggestions but it is not being displayed or rendered in the browser.

Moreover when the user taps Add Dependents this is the code which gets called.

var i = 0;
$("#add-dependent-button").click(function (e) {
    document.getElementById("dependentTable").style.display="block";
    ++i;
    $("#dynamicAddRemove").append('<tr><td><input class="typeahead2 form-control" type="text" name="dependents[' + i +
        '][client_id]" placeholder="Start typing name..." required"/></td><td><select class="form-control" id="relationship" name="dependents['+i+'][relationship]">@foreach($relationships as $relationship)<option value="{{$relationship->id}}">{{$relationship->relation}}</option>@endforeach</select></td><td><button type="button" class="btn btn-outline-danger remove-input-field">Remove</button></td></tr>'
    );
    $('input.typeahead2').typeahead({
        source:  function (query, process) {
            console.log(`${query}`);
            return $.get(path, { query: query }, function (data) {
                console.log(`${data}`);
                return process(data);
            });
        }
    });
    e.preventDefault();
});

I am using Bootstrap 5.1.3 and Laravel 8.75.0.

Appreciate your help!

Answer 1

Try this out. Sry for the last answer

Check out the controller response does is sending crt Json response... I think there is the issue because data is logged as [object object]

My jquery script

  //section to auto populate the company name
        var path = "{{ route('autocomplete') }}";
        $('input.typeahead').typeahead({
            source: function(keyword, process) {
                return $.get(path, {
                    keyword: keyword
                }, function(data) {
                    console.log(data);
                    return process(data);
                });
            }
        });
        //end section to auto populate the company name

My form section

  <div class="row text-center">
                                        <div class="form-group col-md-12">
                                            <input type="text" name="company_name"
                                                class="form-control wizard-required typeahead" id="" placeholder="Company Name"
                                                required />
                                        </div>
                                        <br>
                                        <div class="form-group col-md-12">
                                            <br>
                                            <input type="text" name="monthly_income" class="form-control wizard-required" id=""
                                                placeholder="Net Monthly Income / salary" required
                                                oninput="this.value = this.value.replace(/[^0-9]/, '')" />
                                        </div>
                                    </div>

My controller

class SearchController extends Controller
{
    //
    public function autocomplete(Request $request)
    {
        $company = CompanyList::select("company_name")
        ->where("company_name","LIKE","%".$request->keyword."%")
        ->get();
        $data=[];
       foreach($company as $comp)
       {
           $data[]=$comp->company_name;
       }
        return response()->json($data);
    }
}