Standard Select Form Replacement Plugin - Selectik

Selectik is a replacement based on jQuery for Standard Select Form elements. Selectik helps you create an easy-to-use, cross-browser and completely customizable selects with CSS.

Features:

• TAB Key Supported
• Mouse wheel Supported
• search by first letter
• smart positioning
• Customizable scrollbar
• Change/add methods for custom select
• and more.

Basic Usage:

1. Include jQuery Library and selectik.js before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.selectik.js"></script>

2. Include Mousewheel Support JS according to your need

<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

3. Include default Selectik CSS

<link rel="stylesheet" type="text/css" href="css/selectik.css" />

4. Markup

<div class="selects">
<div class="first select-block">
<form>
<select>
<option value="0">Choose hero</option>
<option value="1">Spider Man</option>
<option value="2">Wolverine</option>
<option value="3">Captain America</option>
<option value="X-Men">X-Men</option>
<option value="Crocodile">Crocodile</option>
<option value="Cheburashka">Cheburashka</option>
<option value="Elephant">Elephant</option>
<option value="New">New</option>
</select>
<br/>
<input type="reset" value="Reset select" />
</form>
</div>
<div class="second select-block">
<select>
<option value="Choose hero">Choose hero</option>
<option value="Spider Man">Spider Man</option>
<option value="Wolverine">Wolverine</option>
<option value="Captain America">Captain America</option>
<option value="New">New</option>
</select>
</div>
<div class="third select-block">
<select>
<option value="Choose hero">Choose hero</option>
<option value="Wolverine">Wolverine</option>
</select>
</div>
</div>

5. Call the function

<script type="text/javascript">
    $(document).ready(function() {
        // attach the plugin to all selects
		
        $('.selects select').selectik({maxItems: 8}, {
				_generateHtml: function(){
					this.$collection = this.$cselect.children();
					var html = '';
					for (var i = 0; i < this.$collection.length; i++){
						var $this = $(this.$collection[i]);
						var textOption = $this[0].text;
						var valueOption = $this[0].value;
						html += '<li class="'+ ($this.attr('disabled') === 'disabled' ? 'disabled' : '') +' new" data-value="'+valueOption+'">'+textOption+'</li>';
					};
					return html;
				}
			}
		);

        // only for demo
        newSelect();
    });
	
    function newSelect(){
		var selectCount = 1;
        $('#new').click(function(){
		
			var html = '';
			var quantity = parseInt($('#quantity').val());
			var width = parseInt($('#width').val());
			var type = $('#type').val();
			var speed = parseInt($('#speed').val());
			var maxEl = parseInt($('#maxEl').val());
			
			for ( var i = 0; i < quantity; i++ ){
				html += '<option value="Option'+i+'">Option'+i+'</option>';
			}
			
			html = '<div class="new'+selectCount+' select-block"><select>'+html+'</select></div>';
			$(html).appendTo('.selects');
			d0 = new Date();
            $('.new'+selectCount+' select').selectik({
				width: width,
				maxItems: maxEl,
				customScroll: type,
				speedAnimation: speed
			});
			d1 = new Date();
			selectCount++;
			time(d1-d0, quantity, type);
        });
    }
	
	function time(e, quantity, type){
		$('#info').html($('#info').html()+'Time of insert Selectik: <b>'+e+'ms</b><br/>');
	}
    </script>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.