title: jQuery-ui autocomplete, select first item
body: <p>I use jQuery-ui autocomplete in my rails application. When I type some input I want it to automatically select the first item in the autocomplete box. How should I implement this?</p>
  
  <pre><code>jQuery(function() {
      return $('#transaction_receiver_name').autocomplete({
          source: $('#transaction_receiver_name').data('autocomplete-source')
      });
  });
  </code></pre>
  
  <p>My css</p>
  
  <pre><code>.ui-helper-hidden-accessible {
    display: none;
  }
  
  ul.ui-autocomplete {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    border: solid 1px #999;
    cursor: default;
    li {
      background-color: #FFF;
      color: black;
      border-top: solid 1px #DDD;
      margin: 0;
      padding: 0;
      a {
        color: #000;
        display: block;
        padding: 3px;
      }
      a.ui-state-hover, a.ui-state-active {
        background-color: #FFFCB2;
      }
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/hW5Fh.png" rel="nofollow noreferrer">Input field</a></p>