type ahead find, show div

by Deborah

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div class="form">
    <input id="location" class="location formField"/>
</div>

<div id="content" class="content">
    content here
</div>

CSS

body {
 font-family: Arial;   
}

.form {
    padding: 1em;
    background: #ececec;
}

.formField {
 font-size: 1.2em;
 padding: 2px;    
}

.content {
    margin-top: 5px;
    padding: 1em;
    background: #eeeeee;     
}

JavaScript

// type ahead find, show div 

$(document).ready(function() {
    $(".location").autocomplete({
        autoFocus: true,
        source: [
            "c++", 
            "java", 
            "php", 
            "coldfusion", 
            "javascript", 
            "asp", 
            "ruby"
        ]
    });
  });