HTML5和jQuery实现搜索智能匹配的功能

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

效果图：

代码如下：

 !DOCTYPE html  html  head lang= en  meta charset= UTF-8  meta name= author content= dony  meta http-equiv= cache-control content= no-cache  meta http-equiv= pragma content= no-cache  meta name= renderer content= webkit  meta http-equiv= Content-Type content= text/html; charset=utf-8  meta http-equiv= X-UA-Compatible content= IE=edge,chrome=1  meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,minimal-ui  title dony /title  link rel= stylesheet href= http://api.snaillove.com/cloudmusic/static/css/bootstrap.min.css rel= external nofollow  style type= text/css  p,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;} /style  /head  body  p >
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP ！
相关推荐：
Html和css实现纯文字和带图标的按钮的代码
如何在html中显示JSON数据
以上就是HTML5和jQuery实现搜索智能匹配的功能的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。