第一种方式：如图
这个效果是非常好的：
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;"></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">ş</i></a> <button id="btnSerach"><i class="fontweb"></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/