JQuery UI Autocompletion textbox customization example for font

In the previous article we have seen how to JQuery Autocompletion basic example.Now we are going to customize the text in the autocompletion box. In this example i have customized font size in the autocompletion textbox.
please check below output.
Output:
JQuery UI Autocompletion textbox customization example for font
JQuery UI Autocompletion textbox customization example for font

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"
        type="text/css" media="all" />
    <style type="text/css">
        li.ui-menu-item
        {
            font-size: 25px;
            font-family: arial;
        }
    </style>
</head>
<body>
    <h3>
        Enter the name of the book:</h3>
    <input type="text" id="book" />
    <script type="text/javascript">
        // array of items to be proposed in the list of suggestions
        var books = ["Ranga", "Rajesh", "Swapna", "Krishna Rangaiah", "jQuery UI"];
        $("input#book").autocomplete({
            source: books
        });
    </script>
</body>
</html>

Share this post :

Post a Comment

Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.

 
Support : Ranga Rajesh Kumar
Copyright © 2012. ASP.NET Examples - All Rights Reserved
Site Designed by Ranga Rajesh Kumar