HTML搜索结果无法通过innerHTML正常显示的技术求助

你的代码存在几个关键问题，导致搜索结果无法正常渲染到页面：

1. 赋值运算符误用 #

所有if(searchterm2 = 1)这类写法是赋值操作，不是条件判断，这会强制修改searchterm2的值，且每次都会进入第一个分支。应该使用严格相等运算符===，同时注意<select>的value返回的是字符串类型，要匹配对应字符串值：

// 错误写法
if(searchterm2 = 1)
// 正确写法
if(searchterm2 === '1')

2. 变量作用域问题 #

每个条件块内部用let声明的resultSet是块级作用域变量，外部的document.getElementById('searchresult').innerHTML = resultSet;无法访问该变量，会抛出resultSet is not defined错误。需要在条件判断前提前声明这个变量。

3. 语法错误 #

事件监听的闭合括号写错了：)};应该改为});，这个语法错误会直接导致整个脚本无法执行。

4. 空搜索词边界处理 #

当搜索框为空时，当前逻辑不会生成任何结果，建议清空结果容器，避免残留旧内容。

修复后的完整代码 #

数据常量

const srcData = [
    {
        "ReportNum": "ABC-001",
        "PrimaryAuthor": "Doe",
        "FirstName": "John",
        "PrimaryAuthoremail": "author@email.com",
        "title": "Example Title",
        "PrimaryUser": "People",
        "ResearchTheme": "Environmental",
        "Habitat1": "Habitat",
        "Purpose1": "Assessment",
        "Notes": "awaiting reply",
        "Link": "https://www.website.org/report.pdf"
    }
];

搜索功能脚本

// 监听搜索框输入事件
document.getElementById('searchfield').addEventListener('keyup', function(){
    const pattern = new RegExp(this.value, 'i');
    const searchterm2 = document.getElementById('searchterm').value;
    let resultSet = ''; // 提前声明变量，确保外部可访问

    if(searchterm2 === '1') {
        resultSet = srcData.filter(item => item.ReportNum.match(pattern) && this.value !== '')
                           .map(item => `<a href="${item.Link}">${item.title}</a>`)
                           .join(', ');  
    } else if(searchterm2 === '2') {
        resultSet = srcData.filter(item => item.title.match(pattern) && this.value !== '')
                           .map(item => `<a href="${item.Link}">${item.title}</a>`)
                           .join(', ');
    } else if(searchterm2 === '3') {
        resultSet = srcData.filter(item => item.PrimaryAuthor.match(pattern) && this.value !== '')
                           .map(item => `<a href="${item.Link}">${item.title}</a>`)
                           .join(', ');
    } else if(searchterm2 === '4') {
        resultSet = srcData.filter(item => item.ResearchTheme.match(pattern) && this.value !== '')
                           .map(item => `<a href="${item.Link}">${item.title}</a>`)
                           .join(', ');
    } else if(searchterm2 === '5') {
        resultSet = srcData.filter(item => item.Habitat1.match(pattern) && this.value !== '')
                           .map(item => `<a href="${item.Link}">${item.title}</a>`)
                           .join(', ');
    } else {
        resultSet = srcData.filter(item => item.Purpose1.match(pattern) && this.value !== '')
                           .map(item => `<a href="${item.Link}">${item.title}</a>`)
                           .join(', ');
    }

    // 空搜索词时清空结果容器
    document.getElementById('searchresult').innerHTML = this.value === '' ? '' : resultSet;
});

用户界面代码

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-default">Type to search reports</span>
        <input type="text" placeholder="Report Search" id="searchfield">
    </div>

    <div class="input-group-prepend">
        <span class="input-group-text">Select search term</span>
        <select class="form-control" id="searchterm">
            <option value="1">Report Number</option>
            <option value="2">Report Title</option>
            <option value="3">Primary Author Last Name</option>
            <option value="4">Research Theme</option>
            <option value="5">Primary Habitat</option>
            <option value="6">Primary Report Purpose</option>
        </select>
    </div>
</div>

<div id="searchresult"></div>

内容的提问来源于stack exchange，提问作者J. Sargent