百度搜索提示的实现

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

发表评论:

本站由emlog驱动 粤ICP备15042739号