Add Links to Typeahead results

Typeahead noob here.

This is my Typeahead script:

<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get(path, { query: query }, function (data) {
            // return '<a href="' + data.profile.username + '" class="list-group-item">' + data.name + ' - @' + data.profile.username + '</a>'
            // return "<a href=" + data.id + ">"+ data.name +"</a>"
            return process(data);
            });
        }
    });
</script>

This is the function in my Laravel Controller:

 public function autocomplete(Request $request)
    {
        $data = User::select("name")
                ->where("name","LIKE","%{$request->input('query')}%")
                ->get();
   
        return response()->json($data);
    }

I want the results (names from a database query, to be links to the individual user pages, whose links would include the id of the user.

I tried:

return "<a href=" + data.id + ">"+ data.name +"</a>"

But this broke the functionality entirely.

Please advise. Thanks!