asp-net-web-forms-textbox-apply-jquery-autocomplete-plugin/VB/GlobalEvents.aspx at 13.1.4+ · DevExpress-Examples/asp-net-web-forms-textbox-apply-jquery-autocomplete-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="GlobalEvents.aspx.vb" Inherits="GlobalEvents" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
	Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<link rel="Stylesheet" type="text/css" href="Styles/AutoCompleteStyles.css" />
	<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
	<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var availableTags = [
				"ActionScript",
				"AppleScript",
				"Asp",
				"BASIC",
				"C",
				"C++",
				"Clojure",
				"COBOL",
				"ColdFusion",
				"Erlang",
				"Fortran",
				"Groovy",
				"Haskell",
				"Java",
				"JavaScript",
				"Lisp",
				"Perl",
				"PHP",
				"Python",
				"Ruby",
				"Scala",
				"Scheme"
			];
		function OnControlsInitialized(s, e) {
			//http://jqueryui.com/demos/autocomplete/
			//http://docs.jquery.com/UI/Position
			$(txt.GetInputElement()).autocomplete({
				source: availableTags,
				position:
				{
					my: "left top",
					at: "left bottom",
					of: txt.GetMainElement()
				},
				select: function (event, ui) {
				  txt.SetValue(ui.item.value);
				}
			});
		}
	</script>

</head>
<body>
	<form id="mainForm" runat="server">
	<div>
		<b>Type in, for example, the "a" key to invoke the jQuery AutoComplete plugin</b>
		<br />
		<br />
		<dx:ASPxTextBox ID="textBox" runat="server" ClientInstanceName="txt" Width="170px">
		</dx:ASPxTextBox>
		<dx:ASPxGlobalEvents ID="globalEvents" runat="server">
			<ClientSideEvents ControlsInitialized="OnControlsInitialized" />
		</dx:ASPxGlobalEvents>
	</div>
	</form>
</body>
</html>