Autocomplete does not work in Sandbox environment with typed animation

Search Best Practices - Search Front-End
1

Hi Hitchhikers,

I am building custom demo and using Pages builder to build search top page.
I can get typed animation from API, but when I click the search bar, it does not populate query suggestions.

When I check the Network call in Developer too in Chrome, it seems calling to liveapi-cached, not liveapi-sandbox.

Could you please tell me how to change this?

Search Bar on the top pages:

Pages Builder:
https://sandbox.yext.com/s/2665628/landingpages/66580/edit

First API call
https://liveapi-sandbox.yext.com/v2/accounts/me/answers/autocomplete?v=20200929&api_key=49ad10571184a0dcd32f354367424b47&sessionTrackingEnabled=false&experienceKey=digital-agency&input=&version=STAGING&locale=ja

Second API Call when I enter the search bar:
https://liveapi-cached.yext.com/v2/accounts/me/answers/autocomplete?v=20190101&api_key=49ad10571184a0dcd32f354367424b47&jsLibVersion=v1.0.0&sessionTrackingEnabled=true&input=&experienceKey=digital-agency&version=STAGING&locale=en

Could you please tell me how I can switch to sandbox-api call?
I would like to change locale value, too.

Thanks,
Takeshi

2

HI Takeshi,

Great question - first, are the typed animation we see now correct?

I believe there are two changes to make here. First, to call the autocomplete for Sandbox, you’ll want to pre-pend “sandbox” to your apiKey so it’s sandbox-exampleapikey123.

Second, for the animation to work with thiis apiKey, you’ll want to change the apikey to be without the prepended “sandbox” in the animated code. This will look as so:

var url = ‘https://liveapi-sandbox.yext.com/v2/accounts/me/answers/autocomplete’;
url += ‘?v=xxxxxx’;
url += ‘&api_key=’ + “exampleapikey123”;
url += ‘&sessionTrackingEnabled=false’;
url += ‘&experienceKey=’ + experienceKey;
url += ‘&input=’;
url += ‘&version=’ + experienceVersion;
url += ‘&locale=’ + locale;

Thanks,
Alyssa

3

Oh! It works now!! Thank you so much!!
I checked the Page Builder.
So we need to prepend “sandbox-” for API key.
But for the autocomplete, we need to specify sandbox’s API key directly, without “sandbox-”.

Got it!! Thank you so much!!