前端模糊查询
时间: 2023-06-21 13:13:59 浏览: 65
前端模糊查询可以使用JavaScript中的字符串方法来实现。具体方法如下:
1. 使用input元素来获取用户输入的关键字。
2. 使用JavaScript中的字符串方法indexOf()来判断用户输入的关键字是否包含在需要查询的字符串中。
3. 如果包含,则将该字符串添加到查询结果中。
4. 最后,在页面上展示查询结果。
以下是一个简单的示例代码:
HTML部分:
```html
<input type="text" id="searchInput" placeholder="请输入关键字">
<button onclick="search()">查询</button>
<ul id="result">
</ul>
```
JavaScript部分:
```javascript
function search() {
const searchInput = document.getElementById('searchInput');
const keyword = searchInput.value.toLowerCase();
const data = ['apple', 'banana', 'orange', 'watermelon'];
const result = [];
for (let i = 0; i < data.length; i++) {
if (data[i].toLowerCase().indexOf(keyword) > -1) {
result.push(data[i]);
}
}
const resultElement = document.getElementById('result');
resultElement.innerHTML = '';
for (let i = 0; i < result.length; i++) {
const li = document.createElement('li');
li.innerText = result[i];
resultElement.appendChild(li);
}
}
```
在这个示例中,我们首先获取用户输入的关键字,然后遍历需要查询的数组,使用indexOf()方法来判断是否包含该关键字。如果包含,则将该字符串添加到result数组中。最后,我们将查询结果展示在页面上。