Results Div

Good day @maven1129

I know with our current out-of-box version of Autocomplete, version 0.38.x, the Autocomplete results are creating various spans that hold their results already. I also know whenever we manage to move people to Autocomplete version 1.x, that version of the library requires site owners to provide their own div instead of being able to automatically attach to search inputs.

That said, something that I think may help with your styling and whatnot is going to be setting the WP SCRIPT_DEBUG to true in your wp-config.php file. This will enable debug mode for Autocomplete and keep the dropdown visible even when focused away from the search input. This will help with inspecting the rendered DOM markup and allow for easier styling.

Do you have a public URL where we could see the Autocomplete in action? I’m kind of curious what I could potentially deduce with the jittering you’re describing, as I’m not seeing that behavior on my local, but I have to believe active theme plays a part in that too.

Hi Michael,

When I add this CSS:

.algolia-autocomplete {

? ? position: fixed !important;

? ? overflow-y: auto !important;

? ? max-height: 50vh !important;

}

It prevents the issue. But, with or without these changes, the results make the body scrollable when before they were shown, the body was not scrollable (this search box is inside a modal, for example, that prevents background scrolling). It also takes two taps on the backdrop to remove the element and trult interact with the page behind it. I noticed that there are two spans on the page being added with the same class as i target above in the css, so not sure if that’s part of it or not.

I would like to be able to target my own div for displaying the autocomplete results, which would likely enable me to control all this is a much batter way. Should I email for support on getting that upgrade to 1.0?

I know I have this pull request on our github repo that’s meant to add Autocomplete 1.x as an option, but still not switch out by default https://github.com/WebDevStudios/wp-search-with-algolia/pull/370

I mention it because it’d show some of the things needing done to manually add the newer Autocomplete.