您的位置：首页 > Web前端 > JavaScript

jsonp 百度搜索框

2018-02-26 11:20 176 查看

转载于：https://www.cnblogs.com/xiaohuochai/p/6568039.html

<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{color:inherit;text-decoration: none;}
input{padding: 0;border: 0;}
.box{width: 340px;height: 38px;border: 2px solid gray;}
.con{overflow: hidden;}
.input{float: left;width: 300px;height: 38px;}
.search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}
.list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;}
.in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;}
.list .in:last-child{margin-bottom: -1px;}
.in:hover{background-color: #f9f9f9;}
</style>

<div class="box" id="box">
<div class="con">
<input class="input" id="search">
<a target="_blank" id="btn" href="javascript:;" class="search"></a>
</div>
<ul class="list" id="list"></ul>
</div>
<script>
function loadScript(url){
loadScript.mark = 'load';
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
function callback(data){
if(data){
var arr = data.s;
var html = '';
for(var i = 0,len = arr.length; i < len; i++){
html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank' style='display:block'>" + arr[i]+ "</a></li>"
}
list.innerHTML = html;
}
}
search.onkeyup = function(e){
e = e || event;
if(e.keyCode == '13'){
window.open('https://www.baidu.com/s?wd=' + this.value);
}
if(this.value){
if(search.data != this.value){
btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value);
var that = this;
loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback");
}
}else{
list.innerHTML = '';
}
search.data = this.value;
}
search.onclick = function(e){
e = e || event;
list.style.display = 'block';
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
document.onclick = function(){
list.style.display = 'none';
}
</script>

jquery

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

a {
color: inherit;
text-decoration: none;
}

input {
padding: 0;
border: 0;
}

.box {
width: 340px;
height: 38px;
border: 2px solid gray;
}

.con {
overflow: hidden;
}

.input {
float: left;
width: 300px;
height: 38px;
}

.search {
width: 38px;
height: 38px;
float: right;
background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;
}

.list {
position: absolute;
width: 298px;
border: 1px solid #e6e8e9;
overflow: hidden;
}

.in {
line-height: 30px;
border-bottom: 1px solid lightblue;
cursor: pointer;
text-indent: 1em;
}

.list .in:last-child {
margin-bottom: -1px;
}

.in:hover {
background-color: #f9f9f9;
}
</style>
</head>

<body>
<div class="box" id="box">
<div class="con">
<input class="input" id="search" data-a="aa">
<a target="_blank" id="btn" href="javascript:;" class="search"></a>
</div>
<ul class="list" id="list"></ul>
</div>
</body>

</html>
<script type="text/javascript" src="../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$('#search').bind('keyup', function(e) {
var that = this;
if (e.keyCode == 13) {
window.open('https://www.baidu.com/s?wd=' + $(this).val());
//跳转到百度
}
if ($(this).val()) {
if ($(this).data('a') != $(this).val()) { //不允许搜索aa
$('#btn').attr('href', 'https://www.baidu.com/s?wd=' + $(this).val());
}
console.log('sss');
$.ajax({
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + $(this).val(),
type: "get",
//jsonp只能用get
async: true,
dataType: "jsonp",
jsonp:'cb',
//在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器

jsonpCallback:"callback",
//"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback"
//为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名

success: function(data){
var arr = data.s;
var html = '';
$.each(arr,function(k,v){
html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ v+"' target='_blank' style='display:block'>" + v+ "</a></li>"
})
$('.list').html(html);
}
});
}else{
$('.list').html('');
}

});
$(document).click(function(){
$('.list').html('');
})
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 百度搜索

相关文章推荐

新的分享

章节导航