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:

image

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:

image

See a Live Demo

2 comments:

  1. UnknownJune 25, 2010 at 5:48 AM

    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

    ReplyDelete
  2. Suprotim AgarwalJune 25, 2010 at 9:09 AM

    Thanks Elijah for the cross browser css tips

    ReplyDelete