javascript_simpleAutoComplete/autoComplete.html at gh-pages · binghuan/javascript_simpleAutoComplete · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript Simple AutoComplete</title>
	<link rel="resource" type="application/json" href="tz.json"/>
	<script src="tz.js"></script>
	<script src="autoComplete.js" defer></script>
	<style>
		body { font-family: Arial, sans-serif; margin: 2em; }
		#searchField { width: 320px; padding: 0.5em; }
		#resultText ul { list-style: none; padding: 0; margin: 0.5em 0; }
		#resultText li { padding: 0.3em 0.5em; cursor: pointer; border-radius: 3px; }
		#resultText li:hover, #resultText li:focus { background: #e0e0e0; outline: none; }
		#SubmitButton:disabled { background: #ccc; cursor: not-allowed; }
	</style>
</head>
<body>
	<label for="searchField">City:</label>
	<input id="searchField" type="text" placeholder="Input area name" aria-autocomplete="list" aria-controls="resultText" autocomplete="off" />
	<input type="button" id="SubmitButton" value="Submit" />
	<p>Here is the result: <small>(If one city is found, click it to replace the search text)</small></p>
	<div id="resultText" role="listbox" aria-label="Search results"></div>
</body>
</html>