Defining individual search bar auto-complete/auto-type behavior when two search bars are present

Search Best Practices - Integration
1

Hi,

I am working with a client who wants to have two separate search bars for Answers on their site but wants to individually define whether the search bar should have auto-complete, auto-type behavior, or both. Is it possible to individually target search bars to show auto-complete option for one and auto-type for other?

They have integrated two search bars on their page. One which is available in the header and the other as a pop-up. They want an auto-typing option for the header while the pop-up one should have all (auto-type, auto-complete, etc.).

@Alyssa_Hubbard

1 Like
3

Hi Johnathon,

This is very simple to do!

To add two search bars, follow the instructions here: Guides | Hitchhikers

For the typed animation, you can follow the instructions here: Guides | Hitchhikers. However, you’ll want to explicitly define the class of the specific search bar that should have the animated text. For example, if your first search bar has a class of .search-bar-container-1, you’ll pass those specific classes in creating your Typed object:

var typed = new Typed(
              ".search-bar-container-1 .js-yext-query",
              options
            );

Putting these together, your code will look similar to this: typed-with-answers-demo-two-search-bars - CodeSandbox

Let us know with any questions!

1 Like