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
HTML
<div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div>
<div>m</div><div>n</div><div>o</div><div>p</div>
<div>q</div><div>r</div><div>s</div><div>t</div><div>u</div><div>v</div><div>w</div><div>x</div>
<div>y</div><div>z</div>
<input type='text' title='Tags' id='tags' />
CSS
div {border:1px solid;display:inline-block; ;padding:1%;margin:1%}
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;
}
JavaScript
$(document).ready(function() {
var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
var tag = $('#tags');
tag.autocomplete({
source: aTags
});
$('div').click(function(){
var newVal = $(this).text();
var oldVal = $('#tags').val();
tag.val(oldVal+newVal)
tag.autocomplete('search')
tag.data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:tag.val()}});
})
});