1. PingCode智库首页
  2. 百科

js圆形收索框怎么做

Edit2 • • 百科

js圆形收索框怎么做

创建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>圆形搜索框</title>


    <link rel="stylesheet" href="styles.css">


</head>


<body>


    <div class="search-container">


        <input type="text" class="search-input" placeholder="Search...">


        <button class="search-button">🔍</button>


    </div>


    <script src="script.js"></script>


</body>


</html>

二、CSS样式

CSS用于美化网页元素。我们将使用CSS来定义搜索框的形状、大小、颜色等样式。

/* styles.css */


body {


    display: flex;


    justify-content: center;


    align-items: center;


    height: 100vh;


    background-color: #f0f0f0;


    margin: 0;


    font-family: Arial, sans-serif;


}


.search-container {


    display: flex;


    align-items: center;


    border-radius: 50px;


    background-color: white;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


    padding: 10px;


    transition: width 0.4s;


    width: 50px;


    overflow: hidden;


}


.search-input {


    border: none;


    outline: none;


    padding: 10px;


    border-radius: 50px;


    font-size: 16px;


    transition: width 0.4s;


    width: 0;


}


.search-button {


    background: none;


    border: none;


    outline: none;


    cursor: pointer;


    font-size: 20px;


    padding: 10px;


    border-radius: 50%;


    transition: background-color 0.3s;


}


.search-button:hover {


    background-color: #e0e0e0;


}

三、JavaScript交互

JavaScript用于添加搜索框的交互功能，如点击按钮时搜索框展开和收缩。

// script.js


document.addEventListener('DOMContentLoaded', () => {


    const searchContainer = document.querySelector('.search-container');


    const searchInput = document.querySelector('.search-input');


    const searchButton = document.querySelector('.search-button');


    searchButton.addEventListener('click', () => {


        if (searchContainer.classList.contains('active')) {


            searchContainer.classList.remove('active');


            searchInput.style.width = '0';


            searchContainer.style.width = '50px';


        } else {


            searchContainer.classList.add('active');


            searchInput.style.width = '200px';


            searchContainer.style.width = '250px';


            searchInput.focus();


        }


    });


    searchInput.addEventListener('blur', () => {


        if (searchInput.value === '') {


            searchContainer.classList.remove('active');


            searchInput.style.width = '0';


            searchContainer.style.width = '50px';


        }


    });


});

四、CSS动画和过渡效果

为了提高用户体验，可以添加一些CSS动画和过渡效果，使搜索框的展开和收缩更加平滑自然。

/* styles.css */


.search-container {


    display: flex;


    align-items: center;


    border-radius: 50px;


    background-color: white;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


    padding: 10px;


    transition: width 0.4s, box-shadow 0.4s;


    width: 50px;


    overflow: hidden;


}


.search-container.active {


    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);


}


.search-input {


    border: none;


    outline: none;


    padding: 10px;


    border-radius: 50px;


    font-size: 16px;


    transition: width 0.4s;


    width: 0;


}


.search-button {


    background: none;


    border: none;


    outline: none;


    cursor: pointer;


    font-size: 20px;


    padding: 10px;


    border-radius: 50%;


    transition: background-color 0.3s;


}


.search-button:hover {


    background-color: #e0e0e0;


}

五、兼容性和优化

确保在不同浏览器和设备上的兼容性是非常重要的。可以使用CSS前缀和媒体查询来优化搜索框在各种设备上的表现。

/* styles.css */


/* 添加CSS前缀 */


.search-container {


    display: flex;


    align-items: center;


    border-radius: 50px;


    background-color: white;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


    padding: 10px;


    transition: width 0.4s, box-shadow 0.4s;


    width: 50px;


    overflow: hidden;


}


.search-container.active {


    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);


}


.search-input {


    border: none;


    outline: none;


    padding: 10px;


    border-radius: 50px;


    font-size: 16px;


    transition: width 0.4s;


    width: 0;


}


.search-button {


    background: none;


    border: none;


    outline: none;


    cursor: pointer;


    font-size: 20px;


    padding: 10px;


    border-radius: 50%;


    transition: background-color 0.3s;


}


.search-button:hover {


    background-color: #e0e0e0;


}


/* 添加媒体查询 */


@media (max-width: 768px) {


    .search-container {


        width: 40px;


    }


    .search-container.active {


        width: 200px;


    }


    .search-input {


        width: 160px;


    }


}

六、进一步优化和功能扩展

可以进一步优化搜索框的功能，如添加搜索建议、自动完成功能、语音搜索等。

添加搜索建议

通过JavaScript和API调用，可以实现搜索建议功能，提升用户体验。

// script.js


document.addEventListener('DOMContentLoaded', () => {


    const searchContainer = document.querySelector('.search-container');


    const searchInput = document.querySelector('.search-input');


    const searchButton = document.querySelector('.search-button');


    const suggestions = document.createElement('div');


    suggestions.classList.add('suggestions');


    searchContainer.appendChild(suggestions);


    searchButton.addEventListener('click', () => {


        if (searchContainer.classList.contains('active')) {


            searchContainer.classList.remove('active');


            searchInput.style.width = '0';


            searchContainer.style.width = '50px';


            suggestions.innerHTML = '';


        } else {


            searchContainer.classList.add('active');


            searchInput.style.width = '200px';


            searchContainer.style.width = '250px';


            searchInput.focus();


        }


    });


    searchInput.addEventListener('input', () => {


        const query = searchInput.value;


        if (query.length > 0) {


            fetchSuggestions(query).then(data => {


                suggestions.innerHTML = data.map(item => `<div>${item}</div>`).join('');


            });


        } else {


            suggestions.innerHTML = '';


        }


    });


    searchInput.addEventListener('blur', () => {


        if (searchInput.value === '') {


            searchContainer.classList.remove('active');


            searchInput.style.width = '0';


            searchContainer.style.width = '50px';


            suggestions.innerHTML = '';


        }


    });


    function fetchSuggestions(query) {


        // 模拟API调用


        return new Promise((resolve) => {


            setTimeout(() => {


                resolve(['Suggestion 1', 'Suggestion 2', 'Suggestion 3'].filter(item => item.toLowerCase().includes(query.toLowerCase())));


            }, 500);


        });


    }


});

添加语音搜索功能

语音搜索功能可以通过使用Web Speech API实现。

// script.js


document.addEventListener('DOMContentLoaded', () => {


    const searchContainer = document.querySelector('.search-container');


    const searchInput = document.querySelector('.search-input');


    const searchButton = document.querySelector('.search-button');


    const micButton = document.createElement('button');


    micButton.classList.add('mic-button');


    micButton.innerHTML = '🎤';


    searchContainer.appendChild(micButton);


    micButton.addEventListener('click', () => {


        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();


        recognition.lang = 'en-US';


        recognition.start();


        recognition.onresult = (event) => {


            searchInput.value = event.results[0][0].transcript;


            searchInput.focus();


        };


    });


    searchButton.addEventListener('click', () => {


        if (searchContainer.classList.contains('active')) {


            searchContainer.classList.remove('active');


            searchInput.style.width = '0';


            searchContainer.style.width = '50px';


        } else {


            searchContainer.classList.add('active');


            searchInput.style.width = '200px';


            searchContainer.style.width = '250px';


            searchInput.focus();


        }


    });


    searchInput.addEventListener('blur', () => {


        if (searchInput.value === '') {


            searchContainer.classList.remove('active');


            searchInput.style.width = '0';


            searchContainer.style.width = '50px';


        }


    });


});

通过以上详细步骤，我们可以创建一个美观、功能强大的圆形搜索框。HTML结构、CSS样式、JavaScript交互是实现这一目标的关键。通过进一步优化和功能扩展，如搜索建议、语音搜索等，可以显著提升用户体验。在实际项目中，可以根据具体需求进行定制和调整。

相关问答FAQs：

1. 如何在网页中创建一个具有圆形形状的搜索框？

  • 首先，您需要在HTML中创建一个输入框元素，并为其添加一个唯一的ID，如 <input type="text" id="search-input">。
  • 接下来，使用CSS来设置该输入框的样式，包括设置宽度、高度、边框等属性，并将其形状设置为圆形。
  • 使用JavaScript来获取输入框的值，并在用户按下回车键时执行搜索功能。
  • 最后，通过将搜索框的样式与网页其他元素进行整合，使其在网页中呈现出圆形搜索框的效果。

2. 如何为圆形搜索框添加动画效果？

  • 首先，您可以使用CSS的过渡属性来为搜索框添加平滑的动画效果，例如渐变、旋转等。
  • 接着，使用JavaScript来监听搜索框的焦点事件，并根据焦点状态为其添加或移除动画类。
  • 在输入框获取焦点时，添加动画类以触发过渡效果；在失去焦点时，移除动画类以取消过渡效果。
  • 可以根据需求自定义动画效果的持续时间、延迟和缓动函数，以使搜索框更加生动和吸引人。

3. 如何为圆形搜索框添加自动补全功能？

  • 首先，您可以使用JavaScript监听搜索框的输入事件，以实时获取用户输入的关键字。
  • 接下来，将用户输入的关键字发送到服务器，进行搜索建议的查询。
  • 服务器可以使用数据库或外部API来获取相关的搜索建议，并将结果返回给前端。
  • 在前端，使用JavaScript将搜索建议显示在一个下拉列表中，并与搜索框进行关联。
  • 当用户选择某个搜索建议时，可以自动将其填充到搜索框中，以方便用户快速搜索相关内容。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3848540

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部