Algolia - Places autocomplete using php api client - algolia

Question

I've been playing around with the Algolia autocomplete places.js library. When you use the library you get a list of suggestions e.g.
{
"query": "pari",
"suggestion": {
"name": "Paris",
"administrative": "Île-de-France",
"country": "France",
"countryCode": "fr",
"type": "city",
"latlng": {
"lat": 48.8546,
"lng": 2.34771
},
"postcode": "75000",
"highlight": {
"name": "<em>Pari</em>s",
"administrative": "Île-de-France",
"country": "France"
},
"value": "Paris, Île-de-France, France"
}
}
I have a need to use the php client and return a list of suggestions for my own applications api e.g.
$places = \AlgoliaSearch\Client::initPlaces();
$result = $places->search($term, [
'type' => ['city', 'country', 'address'],
'language' => 'en',
'aroundLatLngViaIP' => false,
]);
dd($result);
However when you use the php client (note I'm using laravel scout in this instance) you don't get a list of suggestions i.e. there is no value property (Full display name of the place found)in the response that you can return back to the end user - instead you end up with the following response?
{
"hits": [{
"objectID": "145746683_7444",
"locale_names": {
"default": ["Paris"],
},
"city": {
"default": ["Paris"],
},
"county": {
"default": ["Paris"],
},
"administrative": ["Île-de-France"],
"country": {
"default": "France",
},
"country_code": "fr",
"postcode": ["75000"],
"population": 2243833,
"_geoloc": {
"lat": 48.8564,
"lng": 2.3521
},
"_highlightResult": {
"locale_names": {
"default": [{
"value": "<em>Paris</em>",
"fullyHighlighted": true,
"matchedWords": ["paris"],
"matchLevel": "full"
}]
},
}
}],
"nbHits": 1,
"query": "Paris"
}

Answer 1

If you look at the Algolia Places JavaScript library, this is the data they're dealing with as well before it is given down to the Autocomplete:
const name = hit.locale_names[0];
const country = hit.country;
const administrative =
hit.administrative && hit.administrative[0] !== name
? hit.administrative[0]
: undefined;
const city = hit.city && hit.city[0] !== name ? hit.city[0] : undefined;
const suburb =
hit.suburb && hit.suburb[0] !== name ? hit.suburb[0] : undefined;
const county =
hit.county && hit.county[0] !== name ? hit.county[0] : undefined;
const { postcode, highlightedPostcode } =
hit.postcode && hit.postcode.length
? getBestPostcode(hit.postcode, hit._highlightResult.postcode)
: { postcode: undefined, highlightedPostcode: undefined };
const highlight = {
name: getBestHighlightedForm(hit._highlightResult.locale_names),
city: city
? getBestHighlightedForm(hit._highlightResult.city)
: undefined,
administrative: administrative
? getBestHighlightedForm(hit._highlightResult.administrative)
: undefined,
country: country ? hit._highlightResult.country.value : undefined,
suburb: suburb
? getBestHighlightedForm(hit._highlightResult.suburb)
: undefined,
county: county
? getBestHighlightedForm(hit._highlightResult.county)
: undefined,
postcode: highlightedPostcode,
};
const suggestion = {
name,
administrative,
county,
city,
suburb,
country,
countryCode: findCountryCode(hit._tags),
type: findType(hit._tags),
latlng: {
lat: hit._geoloc.lat,
lng: hit._geoloc.lng,
},
postcode,
postcodes: hit.postcode && hit.postcode.length ? hit.postcode : undefined,
};
// this is the value to put inside the <input value=
const value = formatInputValue(suggestion);
You should find all you need in this code, and more specifically for the full display name of the found place, it is built from this (where suggestion from the code above is the rendering context for the code below):
const out = `${name}${type !== 'country' && country !== undefined ? ',' : ''}
${city ? `${city},` : ''}
${administrative ? `${administrative},` : ''}
${country ? country : ''}`
.replace(/\s*\n\s*/g, ' ')
.trim();
return out;
(found in the formatInputValue.js file`)