Dropdown Text Field

HTML

<input>

CSS

ul{ width: 400px;
    height: 100px;
-moz-column-count:1; /* Firefox */
-webkit-column-count:1; /* Safari and Chrome */
column-count:1;
    border: 1px solid #ccc;
     padding: 0px;
    margin: 0px;
    display: none;
}

li { display: inline-block;
    margin: 1px; padding: 3px 5px;
    width: 95px;
}

li.country { font-weight: bold; border: 1px solid #000; }
li.place:hover { background-color: #ccc; cursor: pointer; }

JavaScript

var opt = {
    "Malaysia" : ["Kuala Lumpur", "Selangor", "Pulau Pinang" ],
    "Indonesia" : [ "Jakarta", "Acheh", "Bandung" ]
};

var dd = $('<ul/>');
for(var i in opt) {
    dd.append("<li class='country'>"+i+"</li>");
    for(j in opt[i]) {
        dd.append("<li class='place'>"+opt[i][j]+"</li>");
    }
}

$('input').after( $('<ul class="opt"/>').append( dd.clone() ).html() );

$(document).on('focus','input',function(){
    $('ul').show();
});

$(document).on('click','li', function(){
    if ($(this).hasClass('place')) {
        $('input').val($(this).text());
        $('ul').hide();
    }
});