In this post Asp.Net jQuery
UI Autocomplete Example we
shall see on how to create a simple Autocomplete using jQuery and associate it
to a TextBox control in an Asp.net page.
Add a
textbox txtSimpleAutocomplete to the page, and add the below jQuery
script. Change the references of the jQuery library files to map to your local
path.
Notice that a JavaScript array arrCountries is used as the datasource to the Autocomplete control, you can change to items in this array to the ones which you need.
Build and run the application. Type A in the textbox, notice that the Autocomplete options get populated and gets refined as you type more characters in the TextBox.
<html xmlns="http://www.w3.org/1999/xhtml">
Notice that a JavaScript array arrCountries is used as the datasource to the Autocomplete control, you can change to items in this array to the ones which you need.
Build and run the application. Type A in the textbox, notice that the Autocomplete options get populated and gets refined as you type more characters in the TextBox.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Autocomplete </title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
var
arrCountries = [
"Albania",
"Algeria",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Argentina",
"Armenia",
"Aruba",
"Australia",
"Azerbaijan"
];
//
$(document).ready(function() {
//
// Simple
AutoComplete
$("#txtSimpleAutocomplete").autocomplete({
source:
arrCountries
});
});
});
</script>
</script>
</head>
<body>
<form id=" frmAutocomplete" runat="server">
<table>
<tr>
<td>Simple Autocomplete: </td>
<td>
<asp:TextBox
ID="txtSimpleAutocomplete"
runat="server"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Autocomplete Tutorial
For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Autocomplete Tutorial
Related Posts
No comments:
Post a Comment