高清版
CSS 样式表
css
body {font-family: sans-serif;margin: 0;padding: 0;
}map {width: 100%;height: 100%;
}search {position: absolute;top: 0;left: 0;width: 100%;height: 50px;background-color: fff;
}search form {margin: 0;padding: 0;
}search input {width: 100%;height: 50px;padding: 0 10px;
}search input[type=submit] {width: 80px;height: 50px;background-color: 000;color: fff;
}results {position:absolute;top: 50px;left: 0;width: 100%;height: calc(100% - 50px);overflow-y: scroll;background-color: fff;
}results ul {list-style-type: none;padding: 0;margin: 0;
}results li {padding: 10px;
}JavaScript 脚本
javascript
// 搜索功能
document.getElementById('search').addEventListener('submit', function(e) {e.preventDefault();var query = document.getElementById('query').value;// 向服务器发送搜索请求var xhr = new XMLHttpRequest();xhr.open('GET', 'search.php?query=' + query);xhr.onload = function() {if (xhr.status === 200) {// 处理搜索结果var results = JSON.parse(xhr.responseText);// 显示搜索结果var list = document.getElementById('results').getElementsByTagName('ul')[0];list.innerHTML = '';for (var i = 0; i < results.length; i++) {var li = document.createElement('li');li.innerHTML = results[i];list.appendChild(li);}} else {// 处理错误alert('出错了，请稍后再试。');}};xhr.send();
});
