HTML JQuery – transform Inputbox into dropdown list (combobox)

Transform input textbox in combobox using JQuery and hide click out


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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;

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

	$('#dropdown li').click(function() {

    $(document).click(function (e) {


<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>

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: Logo

You are commenting using your 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