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

February 24, 2022

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%)

>Solution :

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