jQuery & jQueryUI Base

by andrewwhitaker

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<input type="text" id="auto" />
<div id="container"></div>

CSS

#container { display:none; }
table tr td {border: 1px solid black; padding: 10px; }

JavaScript

var src = [{
    value: "C++",
    info: 'http://en.wikipedia.org/wiki/C%2B%2B'},
{
    value: "Java",
    info: 'http://en.wikipedia.org/wiki/Java'},
{
    value: "Objective C",
    info: "http://en.wikipedia.org/wiki/Objective-C"},
{
    value: "JavaScript",
    info: "http://en.wikipedia.org/wiki/JavaScript"},
{
    value: "COBOL",
    info: "http://en.wikipedia.org/wiki/JavaScript"}];

$("#auto").autocomplete({
    source: function(request, response) {
        var result = $.ui.autocomplete.filter(src, request.term);
        if (!result.length) {
            $("#container")
                .hide()
                .html("<strong>" + request.term + "</strong> Not Found.")
                .fadeIn(3000);

        }
        response(result);
    },
    select: function(event, ui) {
        $("#container")
            .hide()
            .html("<table><tr><td>" + ui.item.value + "</td><td><a href='" + ui.item.info + "'>" + ui.item.info + "</a></td></tr></table>")
            .fadeIn(3000);
    }
});