基于jQuery+HTML的站点搜索功能失效：输入关键词无法显示对应Div

我帮你排查出了代码里的关键问题，现在一步步来解决：

核心错误点 #

• 赋值语句写法错误：你写的$("#main").html() = $(id).html();不符合jQuery语法，html()方法设置内容时需要把目标内容作为参数传入，而不是用赋值的形式。
• 另外，如果你想直接显示目标div而非复制内容，当前的CSS结构也需要调整——因为.content容器默认隐藏，里面的子元素也会被连带隐藏。

修复后的代码（两种实现思路） #

思路1：将目标内容复制到#main中展示 #

这个方案和你原本的逻辑最贴近，只需要修正赋值语句即可：

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> 
<style> div.content { display: none; } </style> 
<input id="search" type="text" placeholder="" /> 
<button id="searchbtn">Search</button> 
<hr/> 
<div id="main"></div> 
<div class="content"> 
  <div id="language">testy - it works!!</div>
  <div id="constructedlanguages">Constructed languages content here</div>
</div> 
<script> 
var portals = ["language", "constructedlanguages"]; 
var searchterm, id; 

function randPortal(array) { 
  return array[Math.floor((Math.random()*array.length))]; 
} 

$("#search").attr("placeholder", "e.g. " + randPortal(portals)); 

$("#searchbtn").click(function() { 
  searchterm = $("#search").val().trim(); // 去除输入的首尾空格，避免匹配失败
  id = "#" + searchterm; 
  if (portals.indexOf(searchterm) != -1) { 
    $("#main").html($(id).html()); // 修正赋值写法
  } else {
    $("#main").html("No matching content found!"); // 增加无匹配时的提示
  }
}); 
</script>

思路2：直接显示目标div（隐藏其他内容） #

如果你想直接让对应关键词的div显示出来，而非复制内容，可以调整CSS和逻辑：

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> 
<style> 
  .content > div { display: none; } /* 只隐藏子div，容器保持可见 */
</style> 
<input id="search" type="text" placeholder="" /> 
<button id="searchbtn">Search</button> 
<hr/> 
<div class="content"> 
  <div id="language">testy - it works!!</div>
  <div id="constructedlanguages">Constructed languages content here</div>
</div> 
<script> 
var portals = ["language", "constructedlanguages"]; 
var searchterm, id; 

function randPortal(array) { 
  return array[Math.floor((Math.random()*array.length))]; 
} 

$("#search").attr("placeholder", "e.g. " + randPortal(portals)); 

$("#searchbtn").click(function() { 
  searchterm = $("#search").val().trim(); 
  id = "#" + searchterm; 
  $(".content > div").hide(); // 先隐藏所有内容div
  if (portals.indexOf(searchterm) != -1) { 
    $(id).show(); // 显示匹配的目标div
  } else {
    alert("No matching topic found!"); // 提示用户无匹配结果
  }
}); 
</script>

额外优化建议 #

• 用.trim()处理输入内容，避免用户不小心输入空格导致匹配失败。
• 增加无匹配时的提示，提升用户体验。
• 如果后续portals数组会扩容，可以用portals.includes(searchterm)替代indexOf() != -1，写法更直观易懂。

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