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.).
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(
Putting these together, your code will look similar to this: typed-with-answers-demo-two-search-bars - CodeSandbox
Let us know with any questions!