用js写搜索框怎么做

使用JavaScript创建搜索框的步骤

在创建一个功能齐全的搜索框时，HTML、CSS、JavaScript是必不可少的工具。首先，我们需要一个基础的HTML结构，其次是一些简单的CSS样式，最后用JavaScript实现搜索功能。HTML创建搜索框、CSS美化搜索框、JavaScript实现搜索功能是关键步骤。接下来，我将详细描述每个步骤并给出代码示例。

一、HTML创建搜索框

首先，我们需要在HTML中创建一个输入框和一个提交按钮，用于用户输入搜索内容和执行搜索操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Box Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="search-container">
        <input type="text" id="search-input" placeholder="Search...">
        <button id="search-button">Search</button>
    </div>
    <div id="search-results"></div>
    <script src="script.js"></script>
</body>
</html>

二、CSS美化搜索框

接下来，我们需要用CSS来美化搜索框和按钮，使其看起来更专业。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}
.search-container {
    display: flex;
    align-items: center;
}
#search-input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    outline: none;
}
#search-button {
    padding: 10px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 5px 5px 0;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    outline: none;
}
#search-button:hover {
    background-color: #0056b3;
}
#search-results {
    margin-top: 20px;
    font-size: 18px;
}

三、JavaScript实现搜索功能

最后，用JavaScript来实现搜索功能。这个功能可以在用户输入内容并点击按钮后，动态地显示搜索结果。

// script.js
document.getElementById('search-button').addEventListener('click', function() {
    const query = document.getElementById('search-input').value.toLowerCase();
    const resultsContainer = document.getElementById('search-results');
    // 假设我们有一个数据数组来搜索
    const data = [
        'JavaScript',
        'HTML',
        'CSS',
        'React',
        'Vue',
        'Angular',
        'Node.js',
        'Express',
        'MongoDB',
        'SQL'
    ];
    // 清空之前的搜索结果
    resultsContainer.innerHTML = '';
    // 过滤数据并显示结果
    const filteredData = data.filter(item => item.toLowerCase().includes(query));
    if (filteredData.length > 0) {
        filteredData.forEach(item => {
            const resultItem = document.createElement('div');
            resultItem.textContent = item;
            resultsContainer.appendChild(resultItem);
        });
    } else {
        resultsContainer.textContent = 'No results found';
    }
});

四、扩展功能

1、动态过滤

如果你希望在用户输入时实时更新搜索结果，可以使用input事件监听器代替click事件监听器。

document.getElementById('search-input').addEventListener('input', function() {
    const query = this.value.toLowerCase();
    const resultsContainer = document.getElementById('search-results');
    const data = [
        'JavaScript',
        'HTML',
        'CSS',
        'React',
        'Vue',
        'Angular',
        'Node.js',
        'Express',
        'MongoDB',
        'SQL'
    ];
    resultsContainer.innerHTML = '';
    const filteredData = data.filter(item => item.toLowerCase().includes(query));
    if (filteredData.length > 0) {
        filteredData.forEach(item => {
            const resultItem = document.createElement('div');
            resultItem.textContent = item;
            resultsContainer.appendChild(resultItem);
        });
    } else {
        resultsContainer.textContent = 'No results found';
    }
});

2、从API获取数据

实际应用中，数据通常来自API而非静态数组。你可以使用fetch方法从API获取数据并进行搜索。

document.getElementById('search-button').addEventListener('click', function() {
    const query = document.getElementById('search-input').value.toLowerCase();
    const resultsContainer = document.getElementById('search-results');
    fetch('https://api.example.com/search?q=' + query)
        .then(response => response.json())
        .then(data => {
            resultsContainer.innerHTML = '';
            if (data.length > 0) {
                data.forEach(item => {
                    const resultItem = document.createElement('div');
                    resultItem.textContent = item.name;
                    resultsContainer.appendChild(resultItem);
                });
            } else {
                resultsContainer.textContent = 'No results found';
            }
        })
        .catch(error => {
            resultsContainer.textContent = 'An error occurred';
        });
});

五、总结

创建一个功能齐全的搜索框涉及HTML、CSS和JavaScript的综合应用。HTML创建结构、CSS美化样式、JavaScript实现功能是关键步骤。在实际开发中，你可以根据需求扩展功能，例如实时过滤、从API获取数据等。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理项目和任务，以提高开发效率和团队协作能力。