前端实现页面搜索查询
时间: 2023-07-16 14:14:16 浏览: 51
前端实现页面搜索查询一般需要以下几个步骤:
1. 获取搜索关键词:通过输入框等方式获取用户输入的搜索关键词。
2. 发送请求:将搜索关键词作为参数发送给后端接口,请求需要搜索的数据。
3. 渲染数据:在接收到后端返回的数据后,将数据动态地渲染到页面上。
4. 实现搜索建议:可以通过自动补全等方式实现搜索建议,提高用户搜索体验。
代码示例:
HTML:
```html
<input type="text" id="searchInput">
<button onclick="search()">搜索</button>
<ul id="resultList"></ul>
```
JavaScript:
```javascript
function search() {
const keyword = document.getElementById('searchInput').value;
fetch(`http://example.com/search?keyword=${keyword}`)
.then(response => response.json())
.then(data => {
const resultList = document.getElementById('resultList');
resultList.innerHTML = '';
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
resultList.appendChild(li);
});
});
}
```
在上面的示例中,我们首先通过 `document.getElementById` 方法获取了输入框中的搜索关键词,然后通过 `fetch` 方法发送请求,将搜索关键词作为参数传递给后端接口。在接收到后端返回的数据后,我们动态地创建了 `li` 元素并将数据渲染到页面上。