Several Algolia search inputs on one site are not working

[iloveip]

Hi there,

I have one more question. I have different menu for mobile and desktop versions of the site. I've implemented Algolia search in mobile menu, which is not displayed by default. On a desktop version I would like to have Algolia search in a separate page like search.html. But when I add Algolia search input to this page, it's not working (the results are not showing).

Is it possible to have several Algolia search inputs on one site?

[pixelastic]

It is possible to have various search inputs on the same page. We do not advice to have both showing at the same time, because it will confuse the user. But in your case, having one for desktop and one for mobile makes sense.

If you took the code from our Hyde example as a base, you'll just have to duplicate the logic for both inputs, making sure they correctly display the results in the right container.

[iloveip]

Hello @pixelastic, Yes, I used your Hyde theme as an example. I duplicated the code on both pages, but the search works only in one place, on mobile menu. Here is the code I have on both pages:

<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search"/>
<div class="content container">
  <div class="algolia__initial-content js-algolia__initial-content">{{ content }}</div>
  <div class="algolia__search-content js-algolia__search-content">
    <section class="algolia__results"></section>
  </div>
</div>

In site footer I have:

<script>
  window.ALGOLIA_CONFIG = {
    'applicationId': '{{ site.algolia.application_id }}',
    'indexName': '{{ site.algolia.index_name }}',
    'apiKey': '{{ site.algolia.read_only_api_key }}',
    'baseurl': '{{ site.baseurl }}'
  }
</script>
<script id="algolia__template" type="text/template">
{% raw %}
  <article class="algolia__result">
    <a class="algolia__result-link" href="{{ full_url }}">
      <h2>
        {{{ _highlightResult.title.value }}}
      </h2>
      <p class="algolia__result-text">{{{ _highlightResult.text.value }}}</p>
    </a>
  </article>
{% endraw %}
</script>
<script id="algolia__template--no-results" type="text/template">
  <p class="algolia--no-results">No results.</p>
</script>

When I start typing in the second search input, nothing happens, initial content doesn't get class hidden and search content doesn't get class active.

[pixelastic]

Did you also include the required js files on both pages? Can you see in the Network tab if queries to the Algolia servers are made?

Also do you have a url/repo where I can have a look and test it? I have trouble understanding how your two pages are done :)

[iloveip]

@pixelastic Yes, I have the following files in site footer:

<!-- Algolia Search -->
<script src="//cdn.jsdelivr.net/algoliasearch/3.6.0/algoliasearch.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch.helper/2.1.0/algoliasearch.helper.min.js"></script>
<script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/2.10.3/moment.min.js"></script>
<script src="/js/search.js"></script>

The site is not finished yet and it's in Russian, but you can see it here http://iloveip.herokuapp.com/, and the repo is here https://github.com/iloveip/iloveip. The search for desktop is here http://iloveip.herokuapp.com/search/. And the search for mobile is in mobile menu. Now only the mobile search works.

[pixelastic]

Ok. I've cloned your repo locally, I'll have a look soon :)

[pixelastic]

I think I found the issue. The code from our Hyde plugin could not work if we're using several inputs on the same page because the onQueryChange always reads the value from the first input of the page.

A fix would be to change, in the onQueryChange method the line that says lastQuery = $searchInput.val() to lastQuery = $(this).val(). That was the method will correctly read the value of the input that started the keyup event.

I'll also update the Hyde code accordingly. Thanks for spotting that.

[iloveip]

@pixelastic Thank you very much! The second search is working now. But the search cancel button on the second search is not. I have the following HTML mark up for the search:

<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search"/>
<a href="#" class="search-cancel">Cancel</a>

And in my JS file I have:

// Initiate search cancel button
var $searchCancel = $('.search-cancel');
$searchInput.keyup(function() {
  if (!$searchInput.val().trim()=="") {
    $searchCancel.addClass('is-visible');
  } else {
    $searchCancel.removeClass('is-visible');
  };
});

Does it also have something to do with keyup event?

[pixelastic]

I think you should change your keyup code to something like:

$searchInput.keyup(function() {
  if (!$(this).val().trim()=="") {
    $searchCancel.addClass('is-visible');
  } else {
    $searchCancel.removeClass('is-visible');
  };
});

This way, $(this) always refer to the input where the keyup is firing, whereas the previous code with $searchInput was only refering to the first one in your page.

[iloveip]

@pixelastic Yes, everything is working now. Thank you very much for your help! :)

[pixelastic]

You're welcome, glad I could help :)