搜索栏结果链接点击无响应问题咨询

核心问题原因 #

点击链接时，搜索栏的blur事件会先触发，执行hide_results()隐藏列表并清空输入框，导致链接的点击事件还没来得及执行就被中断。此外代码还有几处细节错误影响功能，一并修正：

具体修复步骤 #

1. 解决blur与点击冲突
   给hide_results添加短暂延迟，让链接的点击事件优先执行，避免列表提前被隐藏。
2. 修正事件绑定错误
   原代码中addEventListener('click', search_album())会立刻执行函数，而非绑定事件，需去掉括号传递函数引用。
3. 完善搜索逻辑
   search_album仅处理了匹配项的显示，未隐藏不匹配项；同时要在搜索前确保结果列表处于显示状态。
4. 修复HTML错误
   • 多个<li>使用了重复的id="#taylor"，ID必须唯一，需修改为不同值；
   • ID属性值不应带#，#是CSS选择器标识，ID本身只需填写名称即可。

修正后的完整代码 #

JavaScript

window.addEventListener("load", function(e){
    // 修正事件绑定：传递函数引用而非直接执行
    document.getElementById('searchbar').addEventListener('click', search_album);
    document.getElementById('searchbar').addEventListener('blur', function() {
        // 延迟执行hide_results，确保链接点击事件先触发
        setTimeout(hide_results, 200);
    });
});

function search_album() {
    let input = document.getElementById('searchbar').value.toLowerCase();
    let x = document.getElementsByClassName('albums');
    // 先显示结果列表
    document.getElementById('list').style.display = 'block';

    for (let i = 0; i < x.length; i++){
        if (x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display = 'list-item';
        } else {
            // 隐藏不匹配的项
            x[i].style.display = 'none';
        }
    }
}

function hide_results() {
    let listItems = document.getElementById('list');
    listItems.style.display = 'none';
    document.getElementById("searchbar").value = "";
}

HTML

<input id="searchbar" type="text" name="search" placeholder="Search Something..."
    onkeyup="search_album()">

<ol id="list" style="display: none;"> <!-- 初始状态隐藏列表 -->
    <li class="albums" id="red"><a href="#red" class="link">Red - Taylor Swift</a></li>
    <li class="albums" id="allartists"><a href="artists.php" class="link">All Artists</a></li>
    <li class="albums" id="allalbums"><a href="albums.php" class="link">All Albums of all Artists</a></li>
    <li class="albums" id="taylor-about"><a href="taylorswift.php" class="link">About Taylor Swift</a></li>
    <li class="albums" id="taylor-albums"><a href="tayloralbums.php" class="link">Taylor Swift Albums</a></li>
    <li class="albums" id="gigs"><a href="gigs.php" class="link">Upcoming GIGS</a></li>
</ol>

额外优化建议 #

• 可替换HTML中的onkeyup为input事件监听（通过addEventListener绑定），支持粘贴、输入法联想等场景；
• 延迟时间可根据实际交互感受调整，200ms足以保证点击事件优先触发；
• 若追求更优雅的实现，可通过事件委托判断点击目标是否属于搜索结果区域，再决定是否隐藏列表。

内容的提问来源于stack exchange，提问作者Alexios