HTML JQuery – transform Inputbox into dropdown list (combobox)

Transform input textbox in combobox using JQuery and hide click out

Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery - Dropbox</title>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.2.custom.css"/>

<style type="text/css">
ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
#dropdown { position:absolute; width:200px; display:none; }
#dropdown li:hover { background:#ccc; cursor:pointer; }
#dropdown li {
    border: 1px solid #DEDEDE;
	
}
</style>
<script>

$(function() {
	$('#btn').click(function(e) {
		
		var pos = $('#txt').offset();
		pos.top += $('#txt').height();
	
		if($('#dropdown').is(':visible')) {
			   //str = 'visibile';
			   $('#dropdown')
			   	.removeClass('active')
				.fadeOut(100);
		} else {
			   //str = 'NOT visible';
			   $('#dropdown')
			     .addClass('active')
			   	.fadeIn(100);
		}
		
		e.stopPropagation();
		
		return false;
	});

	$('#dropdown li').click(function() {
		$('#txt').val($(this).text());
		$(this).parent().fadeOut(100);
	});

    $(document).click(function (e) {
        $('#dropdown').fadeOut(100);
    });
});
</script>    
</head>

<body>

<input type="text" id="txt" />
<button id="btn">Select </button>

<ul id="dropdown">
    <li>Value 1</li>
    <li>Value 2</li>
    <li>Value 3</li>
    <li>Value 4</li>
    <li>Value 5</li>
</ul>

</body>
</html>
This entry was posted in JQuery and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s