JQuery UI Autocompletion width of the widget customization with example
This is advance example of JQuery UI Autocompletion. In this example we will see how to customize the widget size of the autocompletion of the textbox using jquery. Just copy and paste the code, it will work.Output:
 |
| JQuery UI Autocompletion width of the widget customization with example. |
<!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,
open: function (event) {
var $ul = $(this).autocomplete("widget");
$ul.css("width", "400px");
}
});
</script>
</body>
</html>
See More JQuery UI Tutorial
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.