<divclass="dropdown">

<buttononclick="myFunction()"class="dropbtn">下拉菜单</button>

<divid="myDropdown"class="dropdown-content">

<inputtype="text"placeholder="Search.."id="myInput"onkeyup="filterFunction()">

<ahref="#about"rel="externalnofollow">Google</a>

<ahref="#base"rel="externalnofollow">Runoob</a>

<ahref="#blog"rel="externalnofollow">Taobao</a>

<ahref="#contact"rel="externalnofollow">Wiki</a>

<ahref="#custom"rel="externalnofollow">Zhihu</a>

<ahref="#support"rel="externalnofollow">Tmall</a>

<ahref="#tools"rel="externalnofollow">Weibo</a>

</div>

</div>

js实现带搜索的下拉菜单—菜单的样式：

/*下拉菜单按钮*/

.dropbtn{

background-color:#04AA6D;

color:white;

padding:16px;

font-size:16px;

border:none;

cursor:pointer;

}

/*鼠标移动到下拉菜单按钮到样式*/

.dropbtn:hover,.dropbtn:focus{

background-color:#3e8e41;

}

/*搜索框*/

#myInput{

box-sizing:border-box;

background-image:url('searchicon.png');

background-position:14px12px;

background-repeat:no-repeat;

font-size:16px;

padding:14px20px12px45px;

border:none;

border-bottom:1pxsolid#ddd;

}

/*搜索框获取焦点的样式*/

#myInput:focus{outline:3pxsolid#ddd;}

/*容器<div>-定位下拉菜单*/

.dropdown{

position:relative;

display:inline-block;

}

/*下拉菜单内容(默认隐藏)*/

.dropdown-content{

display:none;

position:absolute;

background-color:#f6f6f6;

min-width:230px;

border:1pxsolid#ddd;

z-index:1;

}

/*下拉菜单链接样式*/

.dropdown-contenta{

color:black;

padding:12px16px;

text-decoration:none;

display:block;

}

/*鼠标移动到链接上的样式*/

.dropdown-contenta:hover{background-color:#f1f1f1}

/*显示下拉菜单(使用JS添加.dropdown-content类)*/

.show{display:block;}

js实现带搜索的下拉菜单—JavaScript代码：

/*点击按钮设置下拉菜单的显示与隐藏*/

functionmyFunction(){

document.getElementById("myDropdown").classList.toggle("show");

}

/*搜索功能*/

functionfilterFunction(){

varinput,filter,ul,li,a,i;

input=document.getElementById("myInput");

filter=input.value.toUpperCase();

div=document.getElementById("myDropdown");

a=div.getElementsByTagName("a");

for(i=0;i<a.length;i++){

txtValue=a[i].textContent||a[i].innerText;

if(txtValue.toUpperCase().indexOf(filter)>-1){

a[i].style.display="";

}else{

a[i].style.display="none";

}

}

}