Skip to content

Instantly share code, notes, and snippets.

@eladmeidar
Created July 14, 2013 11:50
Show Gist options
  • Save eladmeidar/5994027 to your computer and use it in GitHub Desktop.
Save eladmeidar/5994027 to your computer and use it in GitHub Desktop.
drop down in js
.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;
}
(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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment