How can I make this a Drop down that can also search each component?

Question

Greetings all and pardon my novice for I am just a mere beginner. I am looking to add a dropdown to my search bar so a user can search in the drop down. I am running into some problems because I am not sure how to do this. If any advice could be spared it would be greatly appreciated. Here is the code that pertains to this problem.

<div style="grid-area: jobNumber;" class="body" >
    <input type="search" class="noBorder" placeholder="Job Number">
  </div>

SASS

.body
  background-color: white
  color: $primary-text-color
  font-size: 1rem
  border: 1px solid transparentize($primary-text-color, .7)
  border-radius: .25rem
  width: 15rem
  min-height: 1rem
  padding: .375rem .75rem
  transform: scale(130%, 130%)

By search in the dropdown do you mean suggest search terms for the input? — Zach Jensz, Feb 24 '22 at 20:44
Yes, so functionality wise I am looking to make a dropdown with searchable inputs — santaclause, Feb 24 '22 at 20:48

Zach Jensz · Accepted Answer · 2022-02-24T20:59:06.933

1

To have a dropdown that recommends options you could add a datalist element and link it to your input:

<div style="grid-area: jobNumber;" class="body" >
    <input type="search" class="noBorder" list="your-datalist-name" placeholder="Job Number">
</div>
<!-- the ID here and list attribute on your input link the two together -->
<datalist id="your-datalist-name">
  <option value="job1">
  <option value="job2">
  <!-- etc... -->
</datalist>

If you want to restrict users to your list of values, see this stackoverflow question

edited Feb 24 '22 at 20:59

answered Feb 24 '22 at 20:55

Zach Jensz

3,650
5
15
30

1

Yep. Exactly what I was looking for. Thank you for the very useful answer Zach. – santaclause Feb 24 '22 at 20:57

How can I make this a Drop down that can also search each component?

1 Answers1