当前位置：首页 > JavaScript

js实现简单的搜索框

2026-01-31 05:48:53JavaScript

实现搜索框的基本结构

HTML部分需要创建一个输入框和一个按钮，用于用户输入搜索关键词并触发搜索功能。

<input type="text" id="searchInput" placeholder="输入搜索关键词">
<button id="searchButton">搜索</button>
<div id="searchResults"></div>

添加事件监听器

为按钮添加点击事件监听器，当用户点击按钮时获取输入框的值并执行搜索操作。

document.getElementById('searchButton').addEventListener('click', function() {
    const searchTerm = document.getElementById('searchInput').value;
    if (searchTerm.trim() !== '') {
        performSearch(searchTerm);
    }
});

实现搜索功能

编写performSearch函数，模拟搜索过程或调用实际API。这里以模拟本地数据搜索为例。

function performSearch(searchTerm) {
    const mockData = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
    const results = mockData.filter(item => 
        item.toLowerCase().includes(searchTerm.toLowerCase())
    );
    displayResults(results);
}

显示搜索结果

将搜索结果渲染到页面上，可以通过动态创建HTML元素来实现。

function displayResults(results) {
    const resultsContainer = document.getElementById('searchResults');
    resultsContainer.innerHTML = '';

    if (results.length === 0) {
        resultsContainer.innerHTML = '<p>未找到匹配结果</p>';
        return;
    }

    const ul = document.createElement('ul');
    results.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        ul.appendChild(li);
    });
    resultsContainer.appendChild(ul);
}

添加键盘事件支持

为提升用户体验，可以监听输入框的键盘事件，当用户按下Enter键时触发搜索。

document.getElementById('searchInput').addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
        const searchTerm = document.getElementById('searchInput').value;
        if (searchTerm.trim() !== '') {
            performSearch(searchTerm);
        }
    }
});

完整代码示例

将上述代码整合到一个完整的HTML文件中，可以直接运行测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单搜索框</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="输入搜索关键词">
    <button id="searchButton">搜索</button>
    <div id="searchResults"></div>

    <script>
        document.getElementById('searchButton').addEventListener('click', function() {
            const searchTerm = document.getElementById('searchInput').value;
            if (searchTerm.trim() !== '') {
                performSearch(searchTerm);
            }
        });

        document.getElementById('searchInput').addEventListener('keyup', function(event) {
            if (event.key === 'Enter') {
                const searchTerm = document.getElementById('searchInput').value;
                if (searchTerm.trim() !== '') {
                    performSearch(searchTerm);
                }
            }
        });

        function performSearch(searchTerm) {
            const mockData = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
            const results = mockData.filter(item => 
                item.toLowerCase().includes(searchTerm.toLowerCase())
            );
            displayResults(results);
        }

        function displayResults(results) {
            const resultsContainer = document.getElementById('searchResults');
            resultsContainer.innerHTML = '';

            if (results.length === 0) {
                resultsContainer.innerHTML = '<p>未找到匹配结果</p>';
                return;
            }

            const ul = document.createElement('ul');
            results.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                ul.appendChild(li);
            });
            resultsContainer.appendChild(ul);
        }
    </script>
</body>
</html>