css地址搜索框带下拉

CSS地址搜索框带下拉是一种常见的网页搜索框设计，它可以帮助用户更快速地找到所需要的地址信息。下面我们一起学习如何实现这个功能。

HTML代码：div class="search-box">
    input type="text" class="search-input" placeholder="请输入地址关键字">
    ul class="search-list">
    /ul>
    /div>
CSS代码：.search-box{
    position:relative;
    width:300px;
}
.search-input{
    width:100%;
    height:40px;
    padding:0 10px;
    border:1px solid #ccc;
    border-radius:4px;
}
.search-list{
    position:absolute;
    top:40px;
    left:0;
    width:100%;
    max-height:200px;
    overflow-y:auto;
    margin:0;
    padding:0;
    list-style:none;
    background-color:#fff;
    border:1px solid #ccc;
    border-radius:4px;
    display:none;
}
.search-list li{
    height:30px;
    line-height:30px;
    padding:0 10px;
    cursor:pointer;
    transition:background-color 0.3s ease-in-out;
}
.search-list li:hover{
    background-color:#f2f2f2;
}
    JavaScript代码：var keywordInput = document.querySelector('.search-input');
    var searchList = document.querySelector('.search-list');
keywordInput.addEventListener('input', function(){
    //获取关键字并向后端请求地址列表var keyword = keywordInput.value.trim();
if(keyword === ''){
    searchList.style.display = 'none';
    return;
}
    //向后端请求数据并处理var data = ['北京市', '上海市', '广州市', '深圳市', '杭州市'];
     //模拟数据var htmlStr = '';
    for(var i = 0;
     i  data.length;
 i++){
if(data[i].indexOf(keyword) !== -1){
    htmlStr += 'li>
    ' + data[i] + '/li>
    ';
}
}
if(htmlStr === ''){
    searchList.style.display = 'none';
    return;
}
    searchList.innerHTML = htmlStr;
    searchList.style.display = 'block';
}
    );
searchList.addEventListener('click', function(event){
if(event.target.tagName.toLowerCase() === 'li'){
    keywordInput.value = event.target.innerText;
    searchList.style.display = 'none';
}
}
    );
    

通过以上代码的简单实现，我们就可以为网页添加一个简单的CSS地址搜索框带下拉功能了。同时，我们还可以根据实际需求对代码进行调整和优化，让用户能够更快速、方便地搜索到所需的信息。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！