Auto suggest search bar

Hi guys! I am working on my client’s project. IN this project there is a search bar how I made this auto suggested search bar in webflow like this

looking forward for the answer

If you have a reasonably-sized list of the suggestions, you can add this using an HTML5 datalist.

<datalist id="phrases">
  <option value="Phrase 1">
  <option value="Phrase 2">
  <option value="Phrase 3">
  <!-- etc -->
  <option value="Phrase 100">

To bind it to your input element, you need a custom attribute of list, which Webflow has reserved.

<input id="mySearch" list="phrases" name="phrase">

So you’ll need to add that in custom code, e.g.;

$(function() {
  $("#mySearch").attr("list", "phrases"); 

All of that code can go in the before /body code section.

Hi memetican!Idont kow how to add this code and how to add attribute to which element if you tell me in detail i am very thankfull to you

do we add it like this?

Hi Hussain, you can clone this project and then reverse engineer it to fit your needs something exactly what you’re looking for from my understanding

Thanks a lot !It was really helpful

Hi dna!I also want something.When a user click on arrow icon the content will copied on search input like google

Hi Hussain, so I am having trouble understanding what you mean. If you can elaborate a bit more and some SC will also help!

This is a scenario.
let we are on google
step 01
step 2
Step 3

ahh got you now so you’ll need to use JS to achieve this here are a few clones I found that can help you achieve this. You’ll need to combine the first example with one of these ones to achieve this hope this helps!

This one would be your best bet