我怎样才能使它成为一个也可以搜索每个组件的下拉列表？

Question

大家好，请原谅我的新手，因为我只是一个初学者。我希望在我的搜索栏中添加一个下拉列表，以便用户可以在下拉列表中进行搜索。我运行遇到了一些问题，因为我不确定该怎么做。如果可以节省任何建议，将不胜感激。这是与此问题相关的代码。

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

Answer 1

要有一个推荐选项的下拉列表，您可以添加一个 datalist 元素并将其 link 添加到您的输入中：

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

如果您想限制用户使用您的值列表，

我怎样才能使它成为一个也可以搜索每个组件的下拉列表？

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

html

css

sass

vue.js