Full json in searchfield after selecting item.

[duikb00t]

First of all:
The dropdown and AJAX call is all working fine. Thanks Typeahead.js.

Issue
When I select an item from my dropdown, the full JSON object is being parsed in the textfield/searchfield.

My data is returned from PHP like: return response()->json($clients);

What am I doing wrong? Do I have to attach somewhere a json.parse?

function generateAjaxAutoCompleteTypeAhead() {
             var client_id  = $('input[name="client_id"]').val();

             var engine = new Bloodhound({
                remote: {
                    url: '/lookupclient?typehead_lookup_client=%QUERY%',
                    wildcard: '%QUERY%'
                },
                
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                datumTokenizer: Bloodhound.tokenizers.whitespace
            });

             $("input[name='typehead_lookup_client']").on('typeahead:selected', function (e, ui) {

            });
            $("input[name='typehead_lookup_client']").typeahead({
                hint: true,
                highlight: true,
                minLength: 3,

                },{
                source: engine.ttAdapter(),
                name: 'resultList',
                limit: 20,


                templates: {
                    empty: [
                        '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
                    ],
                    header: [
                        '<div class="list-group search-results-dropdown">'
                    ],
                    suggestion: function (data) {
                        return '<li class="list-group-item">' + data.city + ' - ' + data.zip_code + ' - ' +data.name + ' - ' + data.street_no + '</li>'
                    } 
                    }
                }
            );
        }
        generateAjaxAutoCompleteTypeAhead()

[samolsen]

I think you may need to define the display function for your dataset:

$("input").typeahead({ /*hint:, highlight:, etc. */ },  {
  source: engine.ttAdapter(),
  display: function (obj) {
    // Return your desired string
  }
});