如何在 javascript 下拉菜單中添加背景顏色

Question

我有以下 css 代碼來自https://www.w3schools.com/howto/howto_js_autocomplete.asp

* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  position: relative;
  left: 950px;
  bottom: 110px;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: #3dc21b;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;

  /*position the autocomplete items to be the same width as the container:*/
  bottom: 70px;
  left: 950px;
  right: 0;

}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #3dc21b !important;
  color: #ffffff;
}

但對我來說我有這個問題 所以下拉 buckground 顏色僅適用於第一個字母

我的 html

<p id="notice"><%= notice %></p>

<h1>Invoices</h1>
<h2 id="home"></h2>
<form action = "/invoices" autocomplete="off">
<div class="dropdown">
  <strong>Short By</strong><select  id="singleSelectValueDDJS" class="dropbtn", name="short_by">

  <div  class="dropdown-content">

  <option value="Name" <%= @op1 %>>Name</option>
  <option value="Date" <%= @op2 %>>Date</option>
  <option value="Creatednew" <%= @op3 %>>New to Old</option>
  <option value="Createdold" <%= @op4 %>>Old to New</option>



  </div>

  </select>

 <div class="sbutton"><input type="submit" value="Εφαρμογη", class="action_button"></div><div class="but_sr"><button class="action_button">Αναζητηση</button></div><div id="kostas"><input id="myInput" name="user_in" value="" class="autocomplete" type="text" placeholder="Προμηθευτης/Αριθμος Μ"></div>
</div>

<table class="content-table">
  <thead>
    <tr>
      <th>Προμηθευτης</th>
      <th>Αριθμος Μ.</th>
      <th>Συνολο</th>
      <th>Καθαρο Συνολο</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody id="tableid">
    <% @invoices.each do |invoice| %>
      <tr>
        <td><%= invoice.form %></td>
        <td><%= invoice.invoice_num %></td>
        <td><%= invoice.total_sum[0] %></td>
        <td><%= invoice.tota_sum_taxless[0] %></td>
        <td><%= link_to 'Show', invoice, class: 'action_button' %></td>
        <td><%= link_to 'Edit', edit_invoice_path(invoice), class: 'action_button' %></td>
        <td><%= link_to 'Destroy', invoice, method: :delete, data: { confirm: 'Are you sure?' }, class: 'action_button' %></td>
      </tr>
    <% end %>
  </tbody>

</table>
<script>
    var promList = JSON.parse('<%= raw @autoComplete %>')
</script>
<%= javascript_pack_tag 'find_me' %>
<br>

應該是問題原因我在軌道上的 ruby 工作嗎？ 該代碼是復制粘貼，但仍然無法正常工作

還是在下拉菜單中為背景添加顏色？

解決方案

.autocomplete-items div {
  padding: 10px;
  padding-inline-start: 10px;
  padding-inline-end: 205px;
  cursor: pointer;
  background-color: #3dc21b;
  border-bottom: 1px solid #d4d4d4;
}

Answer 1

我不確定您是如何實現搜索的，但在他們在javascript部分中寫的how to從w3scool中寫下這一行：

b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";

這負責將匹配的字母加粗。 你在 ruby 中做過同樣的事情嗎？ 確保你正在實施。