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

我有下面的css代码来自

但对我来说，我有这个问题 因此，下拉式背景颜色仅适用于第一个字母

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

---

我不确定您是如何实现搜索的，但在

w3scool

中的

how to

中，他们在

javascript

部分写道：

b.innerHTML=“”+arr[i].substr（0，val.length）+“”

负责将匹配的字母加粗。你在ruby上也这么做过吗？确保你正在实现这一点


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


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