Custom Dropdown Lists & Autocomplete - Blowsie

by blowsie

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/vader/jquery-ui.css">
<div id="breadcrumb">
    <ul>
        <li><span id="acset">Selected Site</span>
            <ul>
                <li class="autocomplete"><input value="Search..."/></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li><span>Selected Group</span>
            <ul>
                <li>Group 1</li>
                <li>Group 2</li>
                <li>Group 3</li>
                <li>Group 4</li>
                <li>Group 5</li>
                <li>Group 6</li>
                <li>Group 7</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li><span>Selected Works</span>
            <ul>
                <li>Works 1</li>
                <li>Works 2</li>
                <li>Works 3</li>
                <li>Works 4</li>
                <li>Works 5</li>
                <li>Works 6</li>
                <li>Works 7</li>
            </ul>
        </li>
    </ul>
</div>

CSS

body {
    font-size:11px;
    background:#333;
}
#breadcrumb > ul {
    margin:0 5px;
    padding:0;
    list-style-type:none;
    float:left;
    color:#fff;
    width:30%;
    display:block;
    font-size:11px;
    overflow:hidden;
    font-family:'Tahoma';
    background: #777777;
    background: -webkit-gradient(linear, left top, left bottom, from(#777777), to(#444444));
    background: -moz-linear-gradient(top, #777777, #444444);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#444444');
    text-shadow: 1px 1px #222222;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #444;
    zoom:1;
    cursor:pointer;
}
#breadcrumb > ul.active {
    border: 1px solid #16AAFF;
}
#breadcrumb span {
    display:block; 
    height:16px; 
    overflow:hidden
}
#breadcrumb input {
    width:90%;
    background:#444;
    padding:3px;
    font-size:11px;
    font-family:'Tahoma';
    border:1px solid #666;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color:#fff;
}
#breadcrumb li {
    margin:0;
    padding:5px;
    line-height:15px;
}
#breadcrumb ul ul li {
    cursor:pointer;
}
#breadcrumb ul ul li:hover {
    color:#16AAFF;
    text-shadow: 1px 1px #222222;
}
#breadcrumb .current, #breadcrumb .current:hover  {
    background:#16AAFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #666666;
    color:#fff;
}

JavaScript

$("#breadcrumb > ul").each(function() {
    // Hide Inner List
    $(this).find("ul").hide();
    // On Hover Show / Hide Child UL
    $(this).find('span').click(function() {
        $(this).parents("ul").addClass("active")
        $(this).next("ul").stop(true, true).slideDown('fast').show('slow');
    })
    // Bind Click to change text and class
    $(this).find("ul li:not('.autocomplete')").click(function() {
        var choice = $(this).text();
        $(this).siblings().removeClass("current");
        $(this).addClass("current").parents("li").find("span").text(choice);
        $(this).parent().slideUp('fast').hide('slow');
        $('#breadcrumb > ul.active').removeClass("active");
    });
});
$(document).mousedown(function(e) {
    if ($(e.target).is('#breadcrumb > ul, #breadcrumb input, #breadcrumb li')) return;
    $('#breadcrumb > ul ul').hide();
    $('#breadcrumb > ul.active').removeClass("active");
});
$(".autocomplete input").focus(function() {
    $(this).val("");
}).autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function(data) {
                response($.map(data.geonames, function(item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                }));
            }
        });
    },
    minLength: 3,
    select: function(event, ui) {
        $("#acset").text(ui.item.label)
        // log( ui.item ?
        //     "Selected: " + ui.item.label :
        //     "Nothing selected, input was " + this.value);
    },
    open: function() {
       ...