REDIPS_autocomplete/index.html at master · dbunic/REDIPS_autocomplete · 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
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
	<title>www.redips.net</title>
	<meta name="author" content="Darko Bunic"/>
	<meta name="description" content="REDIPS.autocomplete"/>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="redips-autocomplete-min.js"></script>
	<script type="text/javascript" src="header.js"></script>
	<script type="text/javascript">
		// autocomplete initialization
		function redipsInit () {
			REDIPS.autocomplete.init();
			//REDIPS.autocomplete.url = 'redips-autocomplete.php?query=';
		}
		// add onload event listener
		if (window.addEventListener) {
			window.addEventListener('load', redipsInit, false);
		}
		else if (window.attachEvent) {
			window.attachEvent('onload', redipsInit);
		}
	</script>
</head>

<body>
	<div id="content">
		<div id="header">
			<h2><a href="http://www.redips.net/javascript/autocomplete/">REDIPS.autocomplete</a></h2>
			<h3>Simple autocomplete - Version 1.3.0</h3>
		</div>

		<div class="text">
			Try to input text in fields below. PHP is used to generate random autocomplete answers.
		</div>

		<div>
			<input type="text" name="field1" onkeydown="REDIPS.autocomplete.keydown(this, event)" onblur="REDIPS.autocomplete.hide()" autofocus="true"/>
			<input type="text" name="filed2" onkeydown="REDIPS.autocomplete.keydown(this, event)" onblur="REDIPS.autocomplete.hide()" class="myinput"/>
		</div>

		<select id="bottomMenu">
			<option>Google Chrome</option>
			<option>FireFox</option>
			<option>Safari</option>
			<option disabled="disabled">Autocomplete box</option>
			<option disabled="disabled">should cover this</option>
			<option disabled="disabled">menu</option>
		</select>

		<div class="text">
			Here are instructions how to use this autocomplete:
			<br/>
			<ol id="list">
				<li>Include <strong>redips-autocomplete-min.js</strong> in HTML page</li>
				<li>Call <strong>REDIPS.autocomplete.init()</strong> after page is loaded</li>
				<li>Add event handlers <strong>onkeydown</strong> and <strong>onblur</strong> to input fields
					<ul>
						<li>onkeydown="REDIPS.autocomplete.keydown(this, event)"</li>
						<li>onblur="REDIPS.autocomplete.hide()"</li>
						<li>don't forget to set input filed name attribute (needed for server side)</li>
					</ul>
				</li>
				<li>Add server logic inside redips-autocomplete.php for typed text
					<ul>
						<li>server side logic should return answers in &lt;option&gt;&lt;/option&gt; format</li>
						<li>URL can be changed with <strong>REDIPS.autocomplete.url</strong></li>
					</ul>

			</ol>
		</div>

	</div>
</body>
</html>