【移动端搜索】点击搜索功能localStorage

第一种方式：如图

 

这个效果是非常好的：

HTML代码为：

<div class="index_wrapper">
     <header>
         <div style="height:45px;"></div>
         <div class="index-top search-fixed">
              <div class="logo"><img src="indexjscss/mlogo.png" height="45" /></div>
              <div class="city">
                   <a href=""><img src="indexjscss/index_position.png" width="25" height="25" /><span id="cityName"></span></a>
              </div>
              <div class="search-btn" style="text-align:left;"><i class="fontweb" style="margin-left:6px;">&#xe600;</i>vivo Xplay5</div>
         </div>
     </header>
     <!--搜索 S-->
     <div class="index_search">
          <div class="search-box">
               <a href="javascript:closeSearch();" class="back_btn"><i class="fontweb">&#351;</i></a>
               <button id="btnSerach"><i class="fontweb">&#xe600;</i></button>
               <input id="s_inputbox" type="search" placeholder="vivo Xplay5" />
          </div>
          <div id="s_list_box" class="search_list" style="display:none;">
               <ul>
                    
               </ul>
          </div>
          <div id="search_res" class="search_list" style="display:none;">
               <ul></ul>
          </div>
          <div class="hot-search">
               <h4 class="border_bottom">热搜词：</h4>
               <p class="border_bottom">
                  <a href="search?wordkey=iPhone6s">iPhone6s</a>
                  <a href="search?wordkey=iPhone6">iPhone6</a>
                  <a href="search?wordkey=乐视1s">乐视1s</a>
                  <a href="search?wordkey=华为%P8">华为 P8</a>
                  <a href="search?wordkey=红米Note2">红米Note2</a>
                  <a href="search?wordkey=手环">智能手环</a>
                  <a href="search?wordkey=自拍杆">自拍杆</a>
               </p>
          </div>
     </div>
     <!--搜索 E-->
</div>

CSS代码为：

.index_wrapper{ min-width: 320px; max-width: 960px; width: 100%; margin: 0 auto;}
.index-top{ background: #45a1de; height: 45px; padding:0 10px;}
.search-fixed{ position: fixed; width: 96%; top: 0; left: 0; z-index: 99;}
.logo{ float: left; width: 50px; height: 45px; overflow: hidden;}
.city{float:right; height: 45px; width: 50px;}
.city a{ display: block; color: #fff; font-size: 10px; padding: 10px 0;}
.city a img{ display: block; margin: 0 auto;}
.search-btn{ background: #fff; height: 29px; line-height: 29px; margin: 0 60px; color: #bbb; border-radius:3px; position: relative; top: 8px;}
.index_search{ background: #fff; height: 100%; position: fixed; top: 0; left: 0; width: 100%; display: none; overflow: auto; z-index: 99;}
.search-box{ height: 45px; background: #45a1de;}
.back_btn{ display: block; width: 45px; height: 45px; float:left; background: url(indexjscss/back.png) no-repeat; background-size: 100%;}
.back_btn i{ display: none;}
.search-box button{ float:right; width: 45px; height: 45px; background: none; border: none;}
.search-box button i{ font-size: 24px; color: #fff;}
.search-box input{ height: 35px; display: block; margin: 0 45px; min-width: 230px; position: relative; top: 5px; border-radius: 3px; border: 0; text-indent:5px;}
.border_bottom{ border-bottom: 1px solid #dadada;}
.hot-search h4{ background: #eee; padding: 0 10px; height: 30px; line-height: 30px; font-weight: normal; font-size: 12px;}
.hot-search p{ padding-top: 10px; background: #f9f9f9;}
.hot-search p a{ display: inline-block; padding: 0 10px; height: 30px; border-radius: 5px; border: 1px solid #e3e3e3; margin: 0 10px 10px; background: #fff; color: #45a1de; font-size: 12px; line-height: 30px;}
.search_list{ background: #fff; display: none;}
.search_list ul{ max-height: 300px; overflow-y:auto;}
.search_list li{ height: 35px; line-height: 35px; border-bottom: 1px solid #dadada;}
.search_list li a{ display: block; height: 35px; line-height: 35px; padding: 0 10px; color: #666; overflow: hidden;}
.search_list li.clearSearchHis a {display: block;text-decoration: none;margin: 0 auto;color: #39f;font-size: 12px;width: 120px;text-align: center;height: 36px;line-height: 30px;}

其中ajax的用法

链接地址为：http://m.ch999.com/ajax/ajaxOperate.aspx?act=ajaxsearch&w=%E4%BA%BA&t=0.01622435380704701

localStorage本地存储数据查看：

JS代码为：

<script>
//设置本地localStorage
var myStorage ={local:window.localStorage,dataLen:15,expTime:10,set:function (key,value) {var self =this;var dataRes =[],jsonDta;dataRes =this.get(key);if (dataRes !=null) {if (typeof dataRes ==="object") {var len =dataRes.length;if (len >=self.dataLen) {dataRes.length =self.dataLen-1;}
}
}
 if (dataRes &&value &&typeof value ==="object") {dataRes.unshift(value)
} else{dataRes =[value];}
jsonDta =JSON.stringify(dataRes);self.local.setItem(key,jsonDta);},get:function (key) {return this.local.getItem(key)?JSON.parse(this.local.getItem(key)):null;},exp:function (key,expire) {var item =this.get(key);if (!item) return null;item =JSON.parse(item);if (typeof item ==="object") {for (var i =0,len =item.length;i < len;i++) {var thatTime =item[i].time;var exp =thatTime + (expire *24 *36e5);var nowTime=new Date().getTime();if (nowTime>exp) {item.splice(i,1);}
}
}
return item;}
};
var storage=window.localStorage;
$(function(){
     $('.search-btn').tap(function(){
          $('.index_search').show();
          $('#s_inputbox').focus();
          $('body').css({overflow:'hidden',height:$(window).height()});
     });
     //搜索
     var defaultSearchKey='vivo Xplay5';
     $('#btnSerach').click(function(){
          var txt =strFilter1($('#s_inputbox').val());
          txt=txt==''?defaultSearchKey:txt;
          var url=txt=''?'brandlist.aspx':("/search?wordkey=" + encodeURI(txt));
          var history=encodeURI(txt);
          var time=new Date().getTime();
          if($.trim(txt).length > 0){
               var searchItem ={
                    "item":history,
                    "time":time,
                    "link":'/search?wordkey='+encodeURI(txt)
               };
               myStorage.set('search_item',searchItem);
          }
          window.location.href=url;
     });
     var flag=false;
     $('#s_inputbox').focus(function(){
          $(this).val('');
          $(this).trigger('keyup');
     });
     $('#s_inputbox').keyup(function(){
          flag=true;
          var txt=strFilter1($('#s_inputbox').val());
          if($.trim(txt).length ==0){
               $('#search_res').hide();
               var html1='';
               var storeHis =storage.getItem("search_item");
               if (!storeHis) {return;}
               var searchHistory =JSON.parse(storeHis) ?JSON.parse(storeHis) :"";
               if (searchHistory &&typeof searchHistory ==="object") {
                        for (var k =0,len =searchHistory.length;k < len;k++) {
                            html1 +='<li><a href=' + decodeURI(searchHistory[k].link) + '>' + decodeURI(searchHistory[k].item) + '</a></li>';
                       }
               } else {
                    html1 +='<li><a href="/search?wordkey=' + decodeURI(storeHis) + '">' + decodeURI(storeHis) + '</a></li>';
               }
               if(txt =='' || txt.length ==0){
                    html1 +='<li class="clearSearchHis"><a href="javascript:;">清除搜索历史</a></li>';
               }
               $('#s_list_box ul').html(html1);
               $('#s_list_box').show();
          }else{
               $('#s_list_box').hide();
               var html='<li><a href="">'+txt+'</a></li>';
               $.ajax({
                    url:"ajax/ajaxOperate.aspx?act=ajaxsearch",
                    data:{w:txt,t:Math.random() },
                    type:"get",
                    dataType:"json",
                    success:function(d){
                         var html='';
                         if(d.result ==1){
                              for(var i=0; i < d.info.length; i++){
                                   html +='<li><a href="search?wordkey='+ d.info[i].name+'&pId='+d.info[i].productId+'">'+d.info[i].name+'</a></li>';
                              }
                              $('#search_res ul').html(html);
                              $('#search_res').show();
                         }
                    }
               });
               $('#search_res ul').html(html);
              $('#search_res').show();
          }
     });
     $('#s_inputbox').keypress(function(e){
          if(e.keyCode == 13){
               $('#btnSerach').click();
          }
     });
     $(document).on("click",".search_list li.clearSearchHis a",function () {
          storage.removeItem("search_item");
          $(".search_list ul").children().remove();
     });

})
function closeSearch(){
  $('.index_search').hide();
  $('body').css({overflow:'auto',height:'auto'}); 
}
/*过滤*/
function strFilter1(suc) {
    var re = /\b(and|or|exec|execute|insert|select|delete|update|alter|create|drop|count|\*|chr|char|asc|mid|substring|master|truncate|declare|xp_cmdshell|restore|backup|net +user|net +localgroup +administrators)\b/;
    return suc.replace(re, '').replace(/</gi, "＜").replace(/>/gi, "＞");
}
</script>

本地效果查看：app/plug/searchIn/demo.html

线上效果查看：http://m.ch999.com/