instantsearchPage is not defined

Hi there, I try to make some customizations following this page


and this
https://community.algolia.com/zendesk/documentation/

and I have this eeror
“Uncaught ReferenceError: instantsearchPage is not defined”

Please help and thanks!

Without more information, this will unfortunately be difficult to help you. :slight_smile:

What are you trying to achieve?
Which code raises this error?

Hi @Jerska Thanks for quick response. I’m trying to enable autocomplete on default search input field on Search results page. This is the code:

https://p6.zdassets.com/hc/theme_assets/1222079/200470707/zd_error.txt

Would you have a live instance where I could see the error happening?

here it is https://teachable1475385865.zendesk.com/hc/en-us

any update? :slight_smile: @Jerska

[Sorry, I missed the notification of your previous message]

Indeed, the code you copy/pasted was not meant to be like this, it’s more of a documentation, with their default values except instantsearchPage which is a function.
You should only have in your page the parameters that you have changed.

tl;dr: remove the line with instantsearchPage to quick-fix your issue.

ok, but is there a way to achieve this?

Yes, definitely. For that, you’ll need to put back the line like this:

instantsearchPage: function () { return false; },

which will basically tell the extension to never use instantsearch and always use the autocomplete.

No possible to have both (instant-search and autocomplete) on the same time on search results page?

It actually isn’t possible by design, to avoid confusion for the users.

However, there is the reuseAutocomplete option which is here to use the same search input than the autocomplete in case you want your users to always type in the same input instead of creating a new one in the page. (See https://support.dashlane.com/ for instance)

If this doesn’t make sense to you, could you describe your use case more so that I could understand what you’re trying to achieve?

Main issue is cause there are not the same search results if I’m using Algolia vs. Zendesk search engine on the Search results page. So I want to keep autocomplete option, and to add instant search.

I’m not sure I follow:

  • If you’re using our autocomplete and our instantsearch, you should never have Zendesk search engine’s results because our instantsearch replaces their search page
  • If you’re using Zendesk search page, you only want our autocomplete and to disable instantsearch, which is what I proposed earlier

Is there something I’m missing?

I’m using Algolia autocomplete. And want to add instant-search
-but to keep old (original) search input field on search results page, and I have done that with CSS
-and to keep autocomplete on that original search input field.

In that case, I thought about something over the week-end.

You could actually instantiate two times the script:

  • once with autocomplete only enabled and the instantsearchPage set to false as described earlier
  • once with instantsearch only enabled

I think there should be no conflict, please let me know if you run into issues here.

Thank you Jerska! This works! Only one thing, can this autocomplete on Search results page looks like on other pages (article desc are missing):
CloudApp

Hey @Jerska Pls see my last comment when you are able. Thanks!

1 Like

Sorry, I don’t know why I’m not receiving notifications on this one.

Can you try this:

  // autocomplete instance
  algoliasearchZendeskHC({
    applicationId: 'DIKGJAE8K5',
    apiKey: '04f7c0bef636648ba6660d9e6f576ac6',
    subdomain: 'teachable',
    poweredBy: false,
    color: '#158EC2',
    highlightColor: '#158EC2',
    autocomplete: {
      enabled: true,
      inputSelector: '#query'
    },
    instantsearch: {
      enabled: false
    }
  });
  
   // instantsearch instance
   algoliasearchZendeskHC({
    applicationId: 'DIKGJAE8K5',
    apiKey: '04f7c0bef636648ba6660d9e6f576ac6',
    subdomain: 'teachable',
    poweredBy: false,
    color: '#158EC2',
    highlightColor: '#158EC2',
    responsive: true,
    instantsearch: {
      enabled: true,
      paginationSelector: '.pagination',
      reuseAutocomplete: false,
      selector: '.al-container',
      tagsLimit: 15
    }
  });

Things to notice:

  • Removed useless (and error throwing) search.helper.start();
  • Removed debug: true which should not be needed anymore
  • Replaced in the instantsearch one reuseAutocomplete to false

Hey @Jerska I put this code, but the result is same.
Still no articles desc.

Let’s try again!

  // autocomplete instance
  algoliasearchZendeskHC({
    applicationId: 'DIKGJAE8K5',
    apiKey: '04f7c0bef636648ba6660d9e6f576ac6',
    subdomain: 'teachable',
    poweredBy: false,
    color: '#158EC2',
    highlightColor: '#158EC2',
    autocomplete: {
      enabled: true,
      inputSelector: '#query'
    },
    instantsearch: {
      enabled: false
    },
    instantsearchPage: function () { return false; }
  });
  
   // instantsearch instance
   algoliasearchZendeskHC({
    applicationId: 'DIKGJAE8K5',
    apiKey: '04f7c0bef636648ba6660d9e6f576ac6',
    subdomain: 'teachable',
    poweredBy: false,
    color: '#158EC2',
    highlightColor: '#158EC2',
    responsive: true,
    autocomplete: {
      enabled: false
    },
    instantsearch: {
      enabled: true,
      paginationSelector: '.pagination',
      reuseAutocomplete: false,
      selector: '.search-container',
      tagsLimit: 15
    }
  });