title: Change Background-Color of jQuery Autocomplete Drop Down When Using Arrow Keys
body: <p>I am using <a href="https://jqueryui.com/autocomplete/#default" rel="nofollow noreferrer">jQuery Autocomplete</a> in my project, and want the background color of the suggested items to be red when I either hover my mouse over it, or use the up/down arrow keys to select one. </p>
  
  <p>So far my code looks like this:</p>
  
  <pre><code>&lt;input id="ajax" placeholder="Search by company name or ticker" autofocus method="GET"  action="{% url 'index' %}" &gt;
  
  &lt;script&gt;
      var availableTags = [
          {% for stock in stocks %}
              { value: "/s/{{ stock.ticker|safe }}",
                label: "{{ stock.ticker|safe }} - {{ stock.name|safe }}"
              },
          {% endfor %}    
      ];
  
      $(document).ready(function() {
          $("input#ajax").autocomplete({
              source: availableTags,
              select: function( event, ui ) { 
                  window.location.href = ui.item.value;
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am able to edit the background color of the mouse over using the following code, but it still defaults to the generic blue when I use the arrow keys to make a selection:</p>
  
  <pre><code>    .ui-menu .ui-menu-item-wrapper {
          color: #303030;
          background-color: #fff;
      }        
  
      .ui-menu .ui-menu-item-wrapper:hover {
          color: #303030;
          background-color: red;
          border: #fff 1px solid;
      }    
  </code></pre>
  
  <p>I am a bit new to Javascript and an absolute beginner at jQuery, any ideas on how I can get the background color to be consistent whether using the mouse or arrow keys to make a selection? Thanks</p>