Dropdown Box Replacement Using Autocomplete - Very Clean List Chooser

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<div id="rowSelector">
    <span class="r-selector" data-source="fruits">Select first</span>: 
    <span class="r-value">Apple</span>
</div>


<div id="rowSelector">
    <span class="r-selector" data-source="fruits">Select second</span>: 
    <span class="r-value">Apple</span>
</div>

CSS

#rowSelector {
    margin:1em;
    font-family:Arial, helvetica, sans-serif;
}
.r-selector {
    text-decoration:underline;
    cursor:pointer;
}
.r-value {
    display:inline-block;
    background:#eee;
    width:7em;
}

JavaScript

$('.r-selector').click(function() {
 var target = $(this).parent().find('.r-value');
 $(this).autocomplete({
                minLength:0,
                position: {my:"left top", at:"right bottom", offset: "10 1",},
                source: ['Apple','Banana','Strawberry'],
                select: function(event, ui) {
                    target.html(ui.item.value);
                }
            });
 $(this).autocomplete("search","");   
});