Upgrade Autocomplete to version 1.x

[tw2113]

What can we do to get ourselves off a version that was released in 2020?

Upgrade guide: https://www.algolia.com/doc/ui-libraries/autocomplete/guides/upgrading/

[asharirfan]

@tw2113 I have looked into upgrading the autocomplete library. The v1.0 release has completely changed the way search works with the plugin template.

We just need time for testing the new update.

[tw2113]

Curious if this should perhaps be part of a 3.x release instead of a 2.x

[asharirfan]

If it has the possibility of introducing a breaking change, then yes.

[asharirfan]

@tw2113 I spent some time today taking a look at what would it cost to update Autocomplete to version 1.x and it is not looking good to me.

The newest library has completely changed the way it initializes on the search input field. Right now, we are able to use the default search fields present in WordPress and integrate autocomplete with it.

But the latest one creates its own input field, which is a no-go for me at least for now. Because our plugin will stop working on the default theme search fields.

I think the following example explains the context a little bit more:

<!-- Autocomplete v0.x -->
<input id="autocomplete" />

<!-- Autocomplete v1.x -->
<div id="autocomplete"></div>

[tw2113]

https://developer.wordpress.org/reference/functions/get_search_form/

[tw2113]

https://discourse.algolia.com/t/displaying-search-by-algolia-text-in-autocomplete-1-x/16853

[tw2113]

Eary draft PR:

Waiting on:

• How to properly show "Search by" text with newest Algolia. See https://discourse.algolia.com/t/displaying-search-by-algolia-text-in-autocomplete-1-x/16853
• How to best handle the search input being replaced by a <div> tag.

[tw2113]

Need to update the @Version parameter in autocomplete.php to properly trigger messages about outdated templates

[tw2113]

"Search by" output has been added, but it's not properly linked yet. We need to find a way to better listen to the popup for our queryselector so that it finds the link, unless we just want to replace the # with the actual permalink?

I also think we should add keyboard navigation help:
https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/keyboard-navigation/

[coreyworrell]

@asharirfan

But the latest one creates its own input field, which is a no-go for me at least for now. Because our plugin will stop working on the default theme search fields.

Would it be possible to just swap the input with a div that autocomplete can then attach to?

for (const input of document.querySelectorAll(algolia.autocomplete.input_selector)) {
  const container = document.createElement('div')
  input.parentNode.insertBefore(container, input)
  container.appendChild(input)
  // ...
  const complete = autocomplete({ container, /* ... */ })
}

[tw2113]

@coreyworrell

Technically, we probably could in some way. If I'm reading your code snippet above properly, we'd be inserting our expected out-of-box div before the <input type="text" name="s" .../> markup correct? Not quite as "destructive" as I had upon my first read of the code, but also not necessarily the best idea either, because then we have 2 different search fields competing in the same space.

The only way around that thought, would be using CSS to visually hide the original search form, but I would want explicit warning that that would happen.

Alternatively, I'm wondering if it'd be better if instead of revamping "autocomplete.php" to be upgraded to 1.x, we instead offer "legacy" aka what we have now, and "modern", which would ship with a 3rd template file that is outfitted for Autocomplete 1.x. We would then add in an option to switch which gets used. Just an idea.

[coreyworrell]

@tw2113 the snippet would insert a div before the input, but then it also places the input inside the div (which autocomplete.js would then replace anyways), so there wouldn't be 2 search fields.. And before replacing, it would be simple to copy over the classes from the input and supply those to the cssClasses.input option, so at least styling would be close as possible.

I do like the idea of having an option though too of choosing which version to use. That way the out-of-the-box method just works, while users who want more up-to-date library can use that and make sure it works well with the theme.

[tw2113]

Not seeing the class copying, but the rest appears to be checking out where the general idea of piecing it together all into 1 new div could be feasible.

[coreyworrell]

@tw2113 sorry, the class copying wasn't in my snippet, but I was just saying that would be easy to implement.

[tw2113]

We need to make sure to somehow account for our action hook from the original template:

<?php
do_action( 'algolia_autocomplete_after_hit' );
?>

It is one being used with our WP Search with Algolia Pro premium extension to automatically show "something" working with Pro activated and started to be used.

[tw2113]

Let's also look into adding any of the UX tracking/analytics/etc features that come with Autocomplete modern into the new template file, even if we have them commented out. Just placing things in the correct spot for users to see, would be a big step up for someone coming into the plugin, and wanting those features.