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 adamovic

HTML

<div id="modal-background"></div>

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


<p><a href="http://www.google.com">Other content</a></p>
<p><a href="http://www.google.com">Other content</a></p>
<p><a href="http://www.google.com">Other content</a></p>
<p><a href="http://www.google.com">Other content</a></p>
<p><a href="http://www.google.com">Other content</a></p>

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;
}


#modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #aaa; /* white */
  filter: alpha(opacity=20);
  opacity: .20;
  -webkit-opacity: .2;
  -moz-opacity: .2;
  z-index: 10; /* 1000 */
}


#modal-background.active {
  display: block;
}    




</style>

JavaScript

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

    $( "#tags" ).autocomplete({
        source: aTags,
        open: function(event, ui) {
       $("#modal-background").addClass("active");
     },
     close: function(event, ui) {
       $("#modal-background").removeClass("active");
     }
    });
    
});