Minimal Jquery Autocomplete

Here is a not-too-ugly minimal example of JQueryUI Autocomplete w/o needing to bring in all of the CSS from Jquery

by Anov Siradj

HTML

<input type='text' title='Tags' id='tags' />

CSS

<style>

input {
    border:1px solid #cccccc;
    border-radius: 3px 3px 3px 3px;
    width: 370px;
    padding: 9px 9px 9px 9px;
    margin: 3px 0px 3px 3px;
    color: #e1e1e1;
}
    
input:focus {
    border-color:#00cc33;
    box-shadow:0 0 10px #d5d5d9;
    -webkit-box-shadow:outset 0 1px 9px #d5d5d9;
    -moz-box-shadow:outset 0 1px 9px #d5d5d9;
    color:  #676767;
}

/* min Jquery CSS elements for autocomplete */
.ui-autocomplete { position: absolute; cursor: default; }    
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; background-color:#f9f9f9; border: 1px solid #efefef; border-radius: 3px 3px 3px 3px; }

.ui-menu .ui-menu {
        margin-top: -3px;
}
.ui-menu .ui-menu-item {
        margin:0;
        padding: 0;
        zoom: 1;
        float: left;
        clear: left;
        width: 100%;
        font-family:arial;
}
.ui-menu .ui-menu-item a {
        text-decoration:none;
        display:block;
        padding:.1em .3em;
        line-height:1.5;
        zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
        font-weight: bold;
}
</style>

JavaScript

$(document).ready(function() {
    
    var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];

    $( "#tags" ).autocomplete({
        source: aTags
    });
    
});