多个输入框联合搜索

如果你有多个输入框,并希望进行联合精准搜索,可以通过组合多个输入框的值来过滤数据。在JavaScript中,常见的做法是先收集每个输入框的值,然后使用这些值过滤数据。

示例:多个输入框联合精准搜索

假设有多个输入框用于过滤不同的属性(例如姓名、年龄和城市),你可以使用下面的代码来实现联合精准搜索:

html 复制代码
<input type="text" id="nameSearch" placeholder="Search by name">
<input type="number" id="ageSearch" placeholder="Search by age">
<input type="text" id="citySearch" placeholder="Search by city">

<button onclick="searchData()">Search</button>

<ul id="results"></ul>

<script>
const data = [
    { id: 1, name: 'John', age: 30, city: 'New York' },
    { id: 2, name: 'Jane', age: 25, city: 'Los Angeles' },
    { id: 3, name: 'Mike', age: 35, city: 'Chicago' },
    { id: 4, name: 'Sara', age: 28, city: 'San Francisco' },
];

function searchData() {
    const nameTerm = document.getElementById('nameSearch').value.toLowerCase();
    const ageTerm = document.getElementById('ageSearch').value;
    const cityTerm = document.getElementById('citySearch').value.toLowerCase();

    // 联合过滤
    const filteredData = data.filter(item => {
        return (!nameTerm || item.name.toLowerCase().includes(nameTerm)) &&
               (!ageTerm || item.age == ageTerm) &&
               (!cityTerm || item.city.toLowerCase().includes(cityTerm));
    });

    displayResults(filteredData);
}

function displayResults(results) {
    const resultsContainer = document.getElementById('results');
    resultsContainer.innerHTML = '';

    results.forEach(item => {
        const li = document.createElement('li');
        li.textContent = `${item.name}, ${item.age}, ${item.city}`;
        resultsContainer.appendChild(li);
    });
}
</script>
相关推荐
独立开阀者_FwtCoder5 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder5 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep12 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛18 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i26 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟31 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览34 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少36 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠1 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro