forked from open-power-workgroup/Hospital
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (88 loc) · 2.33 KB
/
index.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="zh-cn-Hans">
<head>
<meta charset="UTF-8">
<title>IS 莆田</title>
<link href="http://cdn.bootcss.com/normalize/3.0.3/normalize.css" rel="stylesheet">
<style>
html * {
box-sizing: border-box;
}
body {
font: 100%/1.5 "Helvetica Neue", "Microsoft Yahei", sans-serif;
background-color: #f7f7f7;
padding: 25% 10%;
}
form {
text-align: center;
}
input {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #ddd;
border-right: none;
font-size: 1.5em;
padding: 20px 15px;
outline: none;
height: 70px;
vertical-align: middle;
width: 80%;
}
button {
background-color: #2cc36b;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border: 1px solid #2cc36b;
color: #fff;
height: 70px;
outline: none;
padding: 20px 50px;
vertical-align: middle;
}
</style>
<script>
function search(value) {
var xhr = new XMLHttpRequest();
var list = document.querySelector('ul');
xhr.open('get', 'http://klam.cc:16421/query');
xhr.send();
xhr.onload = function() {
var res = [];
var re = new RegExp(value);
var result = JSON.parse(xhr.responseText);
for (var i = 0, ii = result.length; i < ii; i++) {
if (re.test(result[i])) res.push(result[i]);
}
if (!res.length) {
list.innerHTML = '搜索结果为空';
} else {
list.innerHTML = '';
res.forEach(function(lajiHospital) {
var item = document.createElement('li');
item.appendChild(document.createTextNode(lajiHospital));
list.appendChild(item);
});
}
};
}
document.addEventListener('DOMContentLoaded', function() {
var input = document.querySelector('input');
document.querySelector('button').onclick = function() {
if (!input.value) {
alert('请输入搜索关键词');
return;
}
search(input.value);
};
});
</script>
</head>
<body>
<form novalidate>
<input type="text" autofocus placeholder="请输入医院名称"><!--
--><button type="button">搜索</button>
</form>
<ul>
</ul>
</body>
</html>