百度搜索提示的实现
2015-5-6 Linyuting.cn 博客札记
实现类似百度搜索提示的功能。当然,这里推荐直接使用百度官方写好的提示接口 http://www.baidu.com/js/opensug.js 。以下是我学习时自己写的一种方法。。。。只要把#keyword改为你要提示的那个框即可。仔细观察 http://unionsug.baidu.com/su?wd=关键词 这个页面的返回,会发现是一段JS代码。这是一种变相的js跨域请求方法。
<!DOCTYPE html> <html> <body> <input type="text" id="keyword"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> //BaiduSug var kwElem = $('#keyword'); var kw = kwElem.val().toUpperCase(); var sugDiv = '<div id="sugDiv" style="display:none; position:absolute; top:10px; border:solid 1px #000; background:#fff; font:16px; padding:0px 5px;"></div>'; var sugLine = '<div class="sugLine" style="display:block; width: calc(100% - 10px); height:20px; cursor:pointer; margin:0px -5px; padding:0px 5px;">{sug}</div>'; var style = '<style>.sugLine:hover{background:blue; color:#fff;}.avtiveSugLine{background:blue; color:#fff;}</style>'; window.baidu = new Object(); baidu.sug = function(s){ var json = eval(s); if(json.s.length>0){ if($('#sugDiv').length>0) $('#sugDiv').remove(); $('body').append(sugDiv).append(style); var kwBound = document.getElementById('keyword').getBoundingClientRect(); $('#sugDiv').css({ 'width':kwElem.css('width'), 'top':(kwBound.top+kwBound.height)+'px', 'left':kwBound.left+'px' }); $.each(json.s,function(i,v){ if(v) $('#sugDiv').append(sugLine.replace('{sug}',v)); }); $('#sugDiv').show(); } else{ if($('#sugDiv').length>0) $('#sugDiv').remove(); } }; function getSug(keyword){ var script = document.createElement('script'); script.id = 'baiduSug'; script.src = 'http://unionsug.baidu.com/su?wd='+keyword; document.body.appendChild(script); } var callFunc = function(){ var temp = kwElem.val().toUpperCase(); if(temp.indexOf(kw)!=0 || kw.indexOf(temp)!=0){ kw = temp; getSug(kw); $('#baiduSug').remove(); } setTimeout(callFunc,200); }; callFunc(); </script> </body> </html>
标签: JavaScript
« 80端口被System进程占用解决方法
|
给生活松绑»
发表评论: