HTML5+jQuery实现搜索智能匹配功能

HTML5+jquery实现的搜索匹配效果，或者说是搜索过滤，当你在文本框输入一个字符时，如果下边的列表中有以此为开头的内容时，将自动为你显示相关内容，示例中仅列出了一些，用时候你可以自己再完善下，代码仅为您提供一种思路，我想对你是有帮助的

效果图：

代码如下：

 
 
 
 
 
 
 
 
 
 
 
 
 
 div,li,ul{margin: 0;padding: 0;}
 ul li{list-style: none;}
 .basic-grey{width: 600px;margin: 5% 10%;}
 .basic-grey .Companies{position:relative;}
 .basic-grey .Companies ul{position: relative; height: 210px; width: 100%;overflow-y: auto;border: 1px solid #DDD; display: none;}
 .basic-grey .Companies ul li{ padding:3px 12px;}
 .basic-grey .Companies ul li:hover{background-color:#bebebe; cursor: pointer;}
 .basic-grey .Companies ul li.top{position: absolute;top: 0;}
 
 




 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！