Create a Transparent jQuery UI AutoComplete Menu

Let us quickly see how to create a Transparent jQuery UI AutoComplete Menu. Here’s some code to implement the AutoComplete Menu. We will make it transparent in a bit.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load Page Dynamically inside a jQuery UI Dialog</title>
<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script  type="text/javascript" src="http://ajax.microsoft.com/ajax/
jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.8.1/jquery-ui.min.js">
</script>


<script type="text/javascript">
        $(function ()
        {
            var names =
                ["james", "jake", "jaffer", "mary",
                 "maddy", "aaron", "annie", "keith"];
            $("#tags").autocomplete({
                source: names
            });
        });
</script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">Names: </label>
    <input id="tags" />
</div>

</body>
</html>

By default, the menu shows up like this:

Now to add some transparency to the autocomplete menu, use the following CSS

<style type="text/css">
.ui-autocomplete.ui-menu
{
     opacity: 0.4;
     filter: alpha(opacity=40); /* for mozilla */
}
</style>

The output is as shown below:

See a Live Demo

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Test said...: You might consider adding the following cases as well...

.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

Taken from CSS-Tricks: Cross Browser Opacity; June 25, 2010 at 5:48 AM
Suprotim Agarwal said...: Thanks Elijah for the cross browser css tips; June 25, 2010 at 9:09 AM