二、添加搜索按钮

接着，加一个触发搜索的按钮：

搜索

onclick 绑定了函数 searchFunction，按钮点下去就会执行。

三、编写本地搜索逻辑

假设你要在页面上搜索某个类名为 searchableItem 的元素。核心函数可以这样写：

function searchFunction() {
    var input = document.getElementById('searchInput').value;
    var items = document.querySelectorAll('.searchableItem');
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (item.textContent.includes(input)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    }
}

这段代码先拿到输入框的内容，然后选出所有带 .searchableItem 的元素。循环判断——如果元素的文本包含了输入的关键词，就显示它；否则隐藏。这样就实现了一个简单的本地搜索。

四、对接后端搜索（扩展方案）

如果搜索涉及更复杂的业务逻辑——比如要从数据库里查数据再展示结果——那就得和后端打交道了。这时候可以用 Ajax 技术，比如用 fetch API 发送 GET 请求：

function searchFunction() {
    var input = document.getElementById('searchInput').value;
    fetch('/search?keyword=' + input)
        .then(response => response.json())
        .then(data => {
            // 根据返回的data数据更新页面显示
            // 比如创建新的HTML元素并添加到页面中
        });
}

这里向服务端的 /search 路径发请求，带上关键词，拿到返回的数据后在页面上动态更新。前后端配合，体验会更好。

总结

从加输入框、按钮，到写 Ja vaScript 函数完成本地搜索或异步请求，整个过程并不复杂。按照上面的步骤，就能在 Visual Studio 网页里搭出一个实用的搜索栏了。

《夸克》非常好用的免费AI浏览器

下载APP查看