Auto suggest search bar

Design help Layout & Design
1

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

automated search
automated search920×411 29.6 KB

looking forward for the answer

2

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">
</datalist>

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.;

<script>
$(function() {
  $("#mySearch").attr("list", "phrases"); 
});
</script>

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

3

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

4

Screenshot 2023-06-13 173634
Screenshot 2023-06-13 173634922×727 20 KB

do we add it like this?

5

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

1 Like
7

Thanks a lot !It was really helpful

1 Like
8

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

9

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

10

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

11

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