picker

picker

by AlexJsh02

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="picker">
  <div class="control">
    <input type="text" autofocus />
    <ul>
    <li><span>First</span><a tabindex="0">x</a></li>
    </ul>
  </div>
  <div id="search-list">
    <ul>
<li><a href="#">Adriana C. Ocampo Uria</a></li>
<li><a href="#">Albert Einstein</a></li>
<li><a href="#">Anna K. Behrensmeyer</a></li>
<li><a href="#">Blaise Pascal</a></li>
<li><a href="#">Caroline Herschel</a></li>
<li><a href="#">Cecilia Payne-Gaposchkin</a></li>
<li><a href="#">Chien-Shiung Wu</a></li>
<li><a href="#">Dorothy Hodgkin</a></li>
<li><a href="#">Edmond Halley</a></li>
<li><a href="#">Edwin Powell Hubzble</a></li>
<li><a href="#">Elizabeth Blackburn</a></li>
<li><a href="#">Enrico Fermi</a></li>
<li><a href="#">Erwin Schroedinger</a></li>
<li><a href="#">Flossie Wong-Staal</a></li>
<li><a href="#">Frieda Robscheit-Robbins</a></li>
<li><a href="#">Geraldine Seydoux</a></li>
<li><a href="#">Gertrude B. Elion</a></li>
<li><a href="#">Ingrid Daubechies</a></li>
<li><a href="#">Jacqueline K. Barton</a></li>
<li><a href="#">Jane Goodall</a></li>
<li><a href="#">Jocelyn Bell Burnell</a></li>
    </ul>
  </div>
  
</div>

CSS

.picker .control > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.picker .control > ul > li > span {
  text-decoration: underline;
}
.picker .control > ul > li > a {
  margin-left: 2px;
}
#search-list {
  border: 1px solid black;
  width: 150px;
  max-height: 150px;
  display: inline-block;
  overflow-y: auto;
}
#search-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /*overflow-y: auto;*/
  width: 100%;
}
#search-list ul li {
  padding: 0;
  width: 100%;
}
#search-list a {
  font: 12px arial, sans-serif;
  width: 100%;
  text-decoration: none;
  color: black;
  padding: 0;
}
#search-list a:active,
#search-list a:hover,
#search-list a:focus {
  background-color: light-blue;
}

JavaScript

$("#search-list ul li a").on("keyup", function(event){
	switch(event.which){
  	case 46:
    	alert(event.keyCode);
    	break;
  }
});