搜索框<li>元素链接无法点击及搜索范围受限问题求助

核心问题分析 #

1. DOM结构语法错误：原代码将完整HTML文档（含<html>、<head>标签）嵌套在<button>内部，导致浏览器解析混乱，功能失效。
2. 事件触发冲突：输入框的blur事件会在点击搜索结果前触发，直接隐藏列表，导致链接无法被点击。
3. 链接地址不完整：Bing的链接缺少协议头https://，无法正常跳转。
4. 功能模块冗余混乱：字母筛选和搜索栏的代码混合，重复定义HTML结构，逻辑冲突。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 通用样式重置 */
* {
  box-sizing: border-box;
}

/* 字母筛选模块样式 */
.filterDiv {
  float: left;
  background-color: #e42625;
  color: #ffffff;
  width: 200px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #050505;
  cursor: pointer;
  color: white;
  margin-right: 4px;
}

.btn:hover {
  background-color: #ddd;
  color: black;
}

.btn.active {
  background-color: #666;
  color: white;
}

/* 搜索栏模块样式 */
#myInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin: 20px 0;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
}

#myUL li a {
  border-bottom: 1px solid #ddd;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}

#myUL li:last-child a {
  border-bottom: none;
}

#myUL li a:hover {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>Ideas for A Fair Deal for Housing</h2>

<!-- 字母筛选按钮组 -->
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('A')"> A</button>
  <button class="btn" onclick="filterSelection('B')"> B</button>
  <button class="btn" onclick="filterSelection('C')"> C</button>
  <button class="btn" onclick="filterSelection('E')"> E</button>
  <button class="btn" onclick="filterSelection('G')"> G</button>
  <button class="btn" onclick="filterSelection('H')"> H</button>
  <button class="btn" onclick="filterSelection('L')"> L</button>
  <button class="btn" onclick="filterSelection('N')"> N</button>
  <button class="btn" onclick="filterSelection('O')"> O</button>
  <button class="btn" onclick="filterSelection('P')"> P</button>
  <button class="btn" onclick="filterSelection('T')"> T</button>
  <button class="btn" onclick="filterSelection('V')"> V</button>
  <button class="btn" onclick="filterSelection('W')"> W</button>
</div>

<!-- 搜索栏模块 -->
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for organisation.." title="Type in a name">
<ul id="myUL">
  <li><a href="https://www.housingtoday.co.uk/a-fair-deal-for-housing/ideas-on-how-to-create-a-fair-deal-for-housing/a2-dominion">A2 Dominion</a></li>
  <li><a href="https://google.com">Google</a></li>
  <li><a href="https://bing.co.uk">Bing</a></li>
</ul>

<!-- 字母筛选结果容器 -->
<div class="container">
  <a href="https://www.housingtoday.co.uk/a-fair-deal-for-housing/ideas-on-how-to-create-a-fair-deal-for-housing/a2-dominion"><div class="filterDiv A">A2 Dominion</div></a>
  <div class="filterDiv B">BPHA</div>
  <div class="filterDiv W">WHG</div>
  <div class="filterDiv N">Notting Hill Genesis</div>
  <div class="filterDiv A">Accent</div>
  <div class="filterDiv H">Housing 21</div>
  <div class="filterDiv E">EMH Group</div>
  <div class="filterDiv A">Anchor</div>
  <div class="filterDiv G">Great Places</div>
  <div class="filterDiv P">Paradigm</div>
  <div class="filterDiv B">Bromford</div>
  <div class="filterDiv L">Livewest</div>
  <div class="filterDiv T">Thirteen</div>
  <div class="filterDiv C">Citizen</div>
  <div class="filterDiv H">Hyde</div>
  <div class="filterDiv O">Optivo</div>
  <div class="filterDiv V">Vivid</div>
</div>

<script>
// 初始化字母筛选显示全部
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// 字母筛选按钮激活状态切换
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// 搜索栏逻辑
var UL = document.getElementById("myUL");
var searchBox = document.getElementById("myInput");

// 默认隐藏搜索结果列表
UL.style.display = "none";

// 解决blur事件导致无法点击链接的问题：延迟隐藏，给点击事件留响应时间
searchBox.addEventListener("blur", function(){
  setTimeout(() => {
    UL.style.display = "none";
  }, 200);
});

// 聚焦时如果输入有内容，自动显示列表
searchBox.addEventListener("focus",  function(){
    if(searchBox.value.trim().length > 0){
        UL.style.display = "block";
    }
});

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    
    if(filter.trim().length < 1) {
        ul.style.display = "none";
        return;
    } else {
        ul.style.display = "block";
    }
    
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        // 匹配包含搜索关键词的结果
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        } 
    }
}
</script>

</body>
</html>

关键修复点说明 #

1. 修复DOM结构：移除嵌套在按钮内的无效HTML代码，重新整理模块顺序，确保浏览器正确解析。
2. 解决链接点击问题：将blur事件的隐藏操作延迟200ms执行，让浏览器有足够时间响应链接点击事件。
3. 完善交互逻辑：输入框聚焦时，若已有内容自动显示结果列表；输入为空时隐藏列表，优化用户体验。
4. 修复链接地址：给Bing的链接补充https://协议头，确保跳转有效。
5. 整合优化样式：合并分散的CSS代码，统一模块样式，避免样式冲突。

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