当用户在搜索框中输入关键词时,会触发 input 事件,然后我们使用 filter() 方法筛选出符合条件的数据
时间: 2023-04-05 09:01:42 浏览: 101
非常感谢您的提问。当用户在搜索框中输入关键词时,确实会触发 input 事件,然后我们可以使用 filter() 方法来筛选出符合条件的数据。这是一个常见的前端开发问题,需要注意的是,filter() 方法返回的是一个新数组,不会改变原数组。希望我的回答能够帮到您。
相关问题
vue的input框的下拉关键词搜索
要实现vue的input框下拉关键词搜索,可以借助于Element UI框架中的Autocomplete组件。
首先,在组件中引入Autocomplete组件:
```
<template>
<el-autocomplete v-model="selectedKeyword" :fetch-suggestions="querySearch" placeholder="请输入关键词">
<i class="el-icon-search" slot="prefix"></i>
<el-button slot="append" icon="el-icon-circle-check"></el-button>
</el-autocomplete>
</template>
<script>
export default {
data() {
return {
selectedKeyword: '',
keywords: ['vue', 'React', 'Angular', 'Webpack', 'Babel', 'Node.js', 'TypeScript', 'JavaScript']
}
},
methods: {
querySearch(queryString, cb) {
const keywords = this.keywords;
const results = queryString ? keywords.filter(keyword => keyword.toLowerCase().indexOf(queryString.toLowerCase()) !== -1) : keywords;
// 调用回调函数,将结果返回给Autocomplete组件
cb(results);
}
}
}
</script>
```
在上述代码中,我们使用了Element UI的Autocomplete组件来实现下拉关键词搜索框,使用了Autocomplete组件的fetch-suggestions属性来开启下拉搜索功能。在querySearch方法中,我们根据用户输入的关键词来过滤关键词列表,并将过滤后的结果返回给Autocomplete组件。
需要注意的是,在Autocomplete组件中,我们可以使用slot来添加前缀和后缀,这里我们添加了一个搜索图标和一个确认按钮。
这样,当用户在输入框中输入关键词时,会触发querySearch方法来搜索关键词,并将搜索结果以下拉列表的形式呈现在输入框下方供用户选择。
有一个储存好json数据的数组 我想通过搜索框输入的内容 来获取数据里面的数据 展现到页面上
你可以使用 JavaScript 中的 filter() 方法来筛选出符合条件的数据,然后将它们展现到页面上。具体实现方法可以参考以下代码:
// 假设你的数据数组名为 jsonData,搜索框的 ID 为 searchInput,展示数据的 ID 为 dataDisplay
const jsonData = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
{ name: '赵六', age: 35, gender: '女' }
];
const searchInput = document.getElementById('searchInput');
const dataDisplay = document.getElementById('dataDisplay');
searchInput.addEventListener('input', function() {
const keyword = this.value.trim(); // 获取搜索框输入的关键词并去除首尾空格
const filteredData = jsonData.filter(function(item) {
// 使用 filter() 方法筛选出符合条件的数据
return item.name.includes(keyword) || item.age.toString().includes(keyword) || item.gender.includes(keyword);
});
// 将筛选出的数据展现到页面上
dataDisplay.innerHTML = filteredData.map(function(item) {
return `<div>${item.name},${item.age}岁,${item.gender}</div>`;
}).join('');
});
当用户在搜索框中输入关键词时,会触发 input 事件,然后我们使用 filter() 方法筛选出符合条件的数据,并使用 map() 方法将它们转换成 HTML 代码,最后使用 join() 方法将它们拼接成一个字符串,然后将这个字符串赋值给 dataDisplay 元素的 innerHTML 属性,即可展现到页面上。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)