使用js写一个搜索时自动补全的工具

创建一个搜索自动补全工具通常涉及监听输入框事件，向服务器发送请求以获取匹配项，并更新UI以显示这些匹配项。以下是一个简单的示例，使用原生JavaScript来演示这个过程：

  1. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Autocomplete</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="text" id="searchInput" placeholder="Search...">
    <div id="autocompleteResults"></div>
    <script src="script.js"></script>
</body>
</html>
  1. CSS (styles.css):
#autocompleteResults {
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
}

.resultItem {
    padding: 5px;
    cursor: pointer;
}

.resultItem:hover {
    background-color: #f0f0f0;
}
  1. JavaScript (script.js):
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const autocompleteResults = document.getElementById('autocompleteResults');
    const mockData = ['Apple', 'Banana', 'Cherry', 'Dragonfruit', 'Elderberry', 'Fig', 'Grape'];

    searchInput.addEventListener('input', function(event) {
        const query = event.target.value.toLowerCase();
        const results = mockData.filter(item => item.toLowerCase().startsWith(query));
        displayResults(results);
    });

    function displayResults(results) {
        autocompleteResults.innerHTML = ''; // Clear previous results
        if (results.length > 0) {
            results.forEach(result => {
                const resultItem = document.createElement('div');
                resultItem.classList.add('resultItem');
                resultItem.textContent = result;
                resultItem.addEventListener('click', function() {
                    searchInput.value = result;
                    autocompleteResults.innerHTML = ''; // Clear results when an item is selected
                });
                autocompleteResults.appendChild(resultItem);
            });
        }
    }
});

这个示例使用了一个简单的模拟数据集（mockData）来演示自动补全功能。在实际应用中，您可能需要根据用户输入向服务器发送异步请求（例如，使用fetch API）以获取匹配项。此外，您还可以根据需要调整样式和功能。

posted @ 2024-12-30 09:33  王铁柱6  阅读(39)  评论(0)    收藏  举报