百度搜索提示的实现
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进程占用解决方法
|
给生活松绑»
发表评论：