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>

　　

posted @ 2015-07-23 11:44  浮夸浮华  阅读(144)  评论(0)    收藏  举报