JavaScript搜索功能实现：隐藏movieAuthor但可检索，仅展示movieTitle

实现方案 #

第一步：修改HTML模板 #

给li标签新增自定义属性存储拼接的检索内容，页面仅展示电影标题：

<input type="text" class="search-box">
<ul>
    @for (int i = 0; i < Movies.Count; i++)
      {
        var movieTitle = Movies[i].Title;
        var movieAuthor = Movies[i].Author;
        <!-- 新增data-search-content属性存储要检索的全量内容，页面仅展示标题 -->
        <li class="item-list" data-search-content="@(movieTitle + " " + movieAuthor)">@movieTitle</li>
      }
</ul>

第二步：修改JavaScript检索逻辑 #

将原来读取li文本内容的逻辑，改为读取自定义属性的内容做匹配：

let inputElem = document.querySelector(".search-box");
inputElem.addEventListener("input", handleInput, false);

function handleInput() {
    
    let inputElemValue = inputElem.value.toLowerCase();
    let inputWordsArray = inputElemValue.split(" ");
    let liHTMLCollection = document.getElementsByClassName("item-list");

    Array.from(liHTMLCollection).forEach((li) => {
        // 改为读取自定义属性的检索内容做匹配
        let searchContent = li.dataset.searchContent.toLowerCase();
        let matching = true;

        inputWordsArray.forEach((word) => {
            let regex = new RegExp("\\b" + word);
            if (!regex.exec(searchContent)) {
                matching = false;
            }
        });
        li.style.display = matching ? "block" : "none";
    });
}

可选优化说明 #

• 如果需要支持中文关键词检索，原有的\b词边界正则在中文场景下不生效，可以把匹配逻辑改为if (!searchContent.includes(word))即可
• 服务端渲染data-search-content属性时注意做内容转义，避免特殊字符导致的HTML属性注入问题

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