jq搜索效果
<!DOCTYPE> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link href="__PUBLIC__/css/common.css" rel="stylesheet" /> <link href="__PUBLIC__/css/style.css" rel="stylesheet" /> </head> <style type="text/css"> .contcont{width:100%;overflow:auto;} #form input{width:90%;border:none;height:40px;border:1px solid #7f7f7f;margin:5px auto;margin-left:5%;border-radius:7px;text-align:center;color:#818181;font-size:1.6em;line-height:40px;position:fixed;z-index:88} .contcont li{text-align:center;font-size:1.6em;line-height:35px;} .poleft{width:22%;height:5px;background:#ed1164;position:fixed;left:3%;top:50%} .poright{width:22%;height:5px;background:#ed1164;position:fixed;right:3%;top:50%} .contcont li a{font-family: Arial, Helvetica, sans-serif;color:#1c1c1c} </style> <body> <header style=" height:52px;"> <div class="fixed"> <ul> <a href="index.html"><li class="smallleft"><img src="__PUBLIC__/images/public/return.png"></li></a> <li class="smallright"><img src="__PUBLIC__/images/public/member.png"></li> <li class="middle"><img src="__PUBLIC__/images/public/logo.png"></li> </ul> </div> </header> <div class="contcont"> <div id="form"></div> <!-- <div class="poleft"></div> <div class="poright"></div> --> <div style="height:50px;width:100%;background:#fff; position:fixed;top: 44px;"></div> <ul id="list" style="margin-top:70px;"> <volist name="data" id="vo"> <li><a onclick="building('{$vo.address}',{$vo.shop_id})">{$vo.address}</a></li> </volist> </ul> </div> <script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="__PUBLIC__/js/jquery.cookie.js"></script> <script type="text/javascript"> function building(txt,shop_id){ var fruitsurl = "http://t.vgoule.com/index.php/Index/fruits?id="+shop_id; $.cookie("building",txt,{path:'/', domain:'t.vgoule.com'}); location.href = fruitsurl; } </script> <script> (function ($) { jQuery.expr[':'].Contains = function(a,i,m){ return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filterList(header, list) { var form = $("<form>").attr({"class":"filterform","action":"#"}), input = $("<input>").attr({"class":"filterinput","type":"text","placeholder":"搜索您所在大厦"}); $(form).append(input).appendTo(header); $(input) .change( function () { var filter = $(this).val(); if(filter) { $matches = $(list).find('a:Contains(' + filter + ')').parent(); $('li', list).not($matches).slideUp(); $matches.slideDown(); } else { $(list).find("li").slideDown(); } return false; }) .keyup( function () { $(this).change(); }); } $(function () { filterList($("#form"), $("#list")); }); }(jQuery)); </script> </body> </html>