如何在Cordova Android应用单页面中实现可搜索div内容的搜索栏

实现思路 #

• 基于纯原生JS实现，无额外第三方依赖，完美适配Apache Cordova Android环境
• 逻辑核心：监听搜索框输入事件，遍历所有卡片容器，提取卡片内h6标签的文本内容，与用户输入的关键词做大小写不敏感的模糊匹配，匹配成功的卡片保留显示，匹配失败的卡片隐藏

步骤1：添加搜索栏HTML代码 #

放在所有卡片列表的上方，适配现有Bootstrap样式：

<div class="container my-3">
  <input type="text" id="searchInput" class="form-control" placeholder="输入物种名称搜索...">
</div>

步骤2：添加搜索功能JS代码 #

建议放在页面底部，或者JS文件中：

// 等待DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取搜索框元素
  const searchInput = document.getElementById('searchInput');
  // 获取所有卡片外层容器
  const allCards = document.querySelectorAll('.caixa');

  // 监听搜索框输入事件
  searchInput.addEventListener('input', function() {
    // 去除关键词首尾空格，转小写实现大小写不敏感搜索
    const keyword = this.value.trim().toLowerCase();

    // 遍历所有卡片做匹配判断
    allCards.forEach(card => {
      // 提取当前卡片内h6的文本内容，统一转小写
      const cardTitle = card.querySelector('h6.sp').textContent.trim().toLowerCase();
      
      // 关键词为空时显示所有卡片，否则只显示匹配到的卡片
      card.style.display = (keyword === '' || cardTitle.includes(keyword)) ? 'block' : 'none';
    });
  });
});

Cordova环境适配注意事项 #

• 如果需要严格遵循Cordova生命周期，可将上述逻辑中的DOMContentLoaded事件替换为Cordova官方的deviceready事件，避免页面未加载完成就执行JS：

document.addEventListener('deviceready', function() {
  // 把上述搜索逻辑放在这里即可
}, false);

• 本实现仅调用原生Web API，所有安卓版本的Cordova WebView均可正常运行
• 若后续需要扩展搜索范围，比如同时匹配科名、俗名等其他字段，只需要修改文本提取逻辑，将多个字段的文本拼接后再做匹配即可

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