基于两个输入框实现搜索结果筛选功能

云上老周

2026-8-16

双输入联合筛选实现方案

直接上符合需求的代码实现，逻辑清晰且易扩展：

核心筛选函数

// 原始数据
let dataArray = [{name: 'DataOne', place: 'italy'}, {name: 'Second data', place: 'berlin'}, {name: 'third data', place: 'barcelona'} ];

// 输入状态变量
let searchStringName = '';
let searchSelectCity = '';

// 核心筛选逻辑
function filterData() {
  return dataArray.filter(item => {
    // 名称筛选：空输入则跳过过滤，否则做*不区分大小写*的包含匹配
    const matchesName = !searchStringName || item.name.toLowerCase().includes(searchStringName.toLowerCase());
    // 城市筛选：空选择则跳过过滤，否则做*不区分大小写*的完全匹配
    const matchesPlace = !searchSelectCity || item.place.toLowerCase() === searchSelectCity.toLowerCase();
    // 两个条件同时满足才保留数据项
    return matchesName && matchesPlace;
  });
}

输入监听与结果渲染

给输入框和下拉框绑定事件，实时更新筛选状态并渲染结果：

// 假设文本输入框id为nameInput，下拉框id为citySelect
document.getElementById('nameInput').addEventListener('input', (e) => {
  searchStringName = e.target.value.trim();
  renderResults(filterData());
});

document.getElementById('citySelect').addEventListener('change', (e) => {
  searchSelectCity = e.target.value.trim();
  renderResults(filterData());
});

// 简单的结果渲染函数（可根据实际需求修改）
function renderResults(filteredData) {
  const resultsEl = document.getElementById('results');
  resultsEl.innerHTML = filteredData.map(item => `<div>${item.name} (${item.place})</div>`).join('');
}

// 页面加载时渲染全量数据
renderResults(filterData());