drop down in js

simple_select.css

.s-hidden {
  visibility:hidden;
  padding-right:10px;
}

.select {
  height: 29px;
  cursor:pointer;
  display:inline-block;
  position:relative;
  font:normal 11px/22px Arial,Sans-Serif;
  color:black;
  border:1px solid rgb(208,208,208);
}

input[type="text"].selectAutoCompleteInput {
  outline: 0 none;
  box-shadow: 0;
  -webkit-box-shadow: 0!important;
  -moz-box-shadow:0;
  border:0;
  outline: none;
  z-index:9999;
  line-height: 31px;
  font-size:14px;
  font-family: "Calibri";
  padding: 0 10px;
  width: auto;
  position: absolute;
  top:0;
  left:0;
  background: transparent;
}

.styledSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height:31px;
  font-size:14px;
  position:absolute;
  font-family: "Calibri";
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:white;
  color:rgb(119, 119,119);
  padding:0 10px;
  background: white url("/assets/buttons/arrowbox_high.png") right no-repeat;
}

.styledSelect:active,
.styledSelect.active {
  background-color:#eee;
}

.options {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:999999;
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.options li {
  font-family: "Calibri";
  font-size: 14px;
  line-height: 140%;
  color: rgb(51,51,51);
  padding:0 6px;
  margin:0 0;
  padding:0 10px;
}

.options li:hover {
  background-color:rgb(31, 176,212);
  color:white;
}

.options li.active {
  background-color:rgb(31, 176,212);
  color:white;
}

simple_select.js

(function($) {
  $.fn.simpleSelect = function() {
    var that = this
    $(that).each(function() {

    // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

    // Create a wrapper
    var wrapper = $("<div></div>");
    var autoCompleteInput = $("<input type='text' class='selectAutoCompleteInput'/>")
    $(wrapper).addClass("select");
    $(wrapper).addClass($this.attr("class"))
    $(wrapper).removeClass("s-hidden");
    // Hides the select element
  //  $this.addClass('s-hidden');

    // Wrap the select element in a div

    $this.wrap($(wrapper));

    // Insert a styled div to sit over the top of the hidden select element
    $(this).after('<div class="styledSelect"></div>');

    $(autoCompleteInput).insertBefore($this);
    $(autoCompleteInput).css("width", ($(autoCompleteInput).parent("div.select").width() - 45 ) + "px");
    $(autoCompleteInput).css("height", $(autoCompleteInput).parent("div.select").height() + "px");
    // Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    
    $.each($this.children("option"), function(e) {
      if (($(this).prop("selected") || 
          ($(this).attr("selected") == "selected"))) {
        $styledSelect.text($(this).text());
        $(autoCompleteInput).val("");
      }
    });
    
    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        if(!($this.children('option').eq(i).val() == "")) {
            $('<li />', {
                text: $this.children('option').eq(i).text(),
                rel: $this.children('option').eq(i).val()
            }).appendTo($list);
        }
    }

    // Cache the list items
    var $listItems = $list.children('li');
    
    $(autoCompleteInput).focus(function(e){
        $styledSelect.text("");
        $(this).val("");
    });

    $(autoCompleteInput).focusout(function(e){
        $styledSelect.text($this.find("option:selected:last").text());
        $(this).val("");
    });



    $(autoCompleteInput).keyup(function(e){
        var currentValue = $(this).val();

        if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13) {
          e.preventDefault();

          if ($styledSelect.find("ul.options").css("display") != "none") {


            var currentIndex = parseInt($styledSelect.data("selected-index"));
            var relevantOptions = $(this).parents(".select").find("ul.options li:visible");
            var totalOptions = $(relevantOptions).length;

            if(currentIndex == undefined || isNaN(currentIndex) || currentIndex > totalOptions) {
              currentIndex = -1;
            }

            relevantOptions.removeClass("active");

            if(e.keyCode == 40) {
              
              if (currentIndex < totalOptions - 1 ) {
                currentIndex++;
              } else {
                currentIndex = 0;
              }
            } else if (e.keyCode == 38) {
              if (currentIndex > 0) {
                currentIndex--;
              } else {
                currentIndex = totalOptions - 1;
              }
            } else if (e.keyCode == 13) {
              $(relevantOptions[currentIndex]).trigger("click");
            }

            $styledSelect.data("selected-index", currentIndex);
            if (currentIndex <= totalOptions && currentIndex > -1) {
              relevantOptions.removeClass("active");
              $(relevantOptions[currentIndex]).addClass("active");
            }
          } 
        } else {
          $styledSelect.data("selected-index", -1);
          if (currentValue == "") {
              $styledSelect.next("ul.options").find("li").show();
          } else {
              $styledSelect.text("");
              $styledSelect.next("ul.options").hide()
              $styledSelect.next("ul.options").find("li").hide();
              $styledSelect.next("ul.options").show();
              $styledSelect.next("ul.options").find("li").filter(function(e) {
                  var reg = new RegExp(currentValue, "i");
                  if(reg.test($(this).attr("rel").toLowerCase()) ||
                     reg.test($(this).text().toLowerCase())) {
                      $(this).show();
                  }
              });
              $styledSelect.next("ul.options").find("li:contains('" + currentValue + "')").show();
              $styledSelect.next("ul.options").find("li[rel='Other']").show();
          }
        }
    });
    // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $(this).next("ul.options").find("li").show();
        $('div.styledSelect.active').each(function() {
            $(this).removeClass('active').next('ul.options').hide();
        });

        // Show / Hide on clicking the main select element
        if($(this).toggleClass('active').next('ul.options').css("display") == "block") {
            $(this).toggleClass('active').next('ul.options').hide();
        } else {
            $(this).toggleClass('active').next('ul.options').show();
        }
    });

    // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
    // Updates the select element to have the value of the equivalent option
    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        that.val($(this).attr('rel'));
        $this.children("option").removeAttr("selected");

        $this.find("option[value='" + $(this).attr("rel") +"']").prop("selected", true);
        $this.find("option[value='" + $(this).attr("rel") +"']").attr("selected", "selected");
        $this.trigger("change");
        $list.hide();
        $(autoCompleteInput).val("");
        /* alert($this.val()); Uncomment this for demonstration! */
    });

    // Hides the unordered list when clicking outside of it
    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });
    });
  } 
}(jQuery));