网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。
这是一款模仿百度搜索输入关键字自动补全代码，基于jquery+ajax实现，自动补全数据是通过百度http://suggestion.baidu.com/su?wd=' + keywords jsonp 返回。
前端代码：
<!DOCTYPE html>
<meta charset="utf8">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baidu Jsonp</title>
</head>
<style type="text/css">
#word{
position: absolute;
z-index: 99;
width: 145px;
height: auto;
background-color: white;
border: black solid 1px;
display: none;
}
.click_work{
padding-bottom: 8px;
font-weight:lighter;
font-size: 13px;
cursor:pointer;/*鼠标放上变成小手*/
}
.click_work:hover{
color: orange;
background-color: gray;
}
.error{
color: gray;
cursor:pointer;/*鼠标放上变成小手*/
}
</style>
<body>
<center>
<h1>百度</h1>
</center>
<table align="center" cellspacing="0" cellpadding="10" border="0" >
<tr>
<td style="position: relative;">
<input id="text" type="text" placeholder="搜索">
<input type="button" value="Go">
<div id="word"></div>
</td>
</tr>
</table>
</body>
<!-- 引入DOM -->
<script type="text/javascript" src="public/jquery.js"></script>
<script type="text/javascript" src="public/JsonpAjax.js"></script>
<!-- END DOM -->
</html>
JsonpAjax.js
$(function(){
//当键盘键被松开时发送Ajax获取数据
$('#text').keyup(function(){
var keywords = $(this).val();
if (keywords=='') { $('#word').hide(); return };
$.ajax({
url: 'http://suggestion.baidu.com/su?wd=' + keywords,
dataType: 'jsonp',
jsonp: 'cb', //回调函数的参数名(键值)key
// jsonpCallback: 'fun', //回调函数名(值) value
beforeSend:function(){
$('#word').append('<div>正在加载。。。</div>');
},
success:function(data){
$('#word').empty().show();
if (data.s=='')
{
$('#word').append('<div class="error">Not find "' + keywords + '"</div>');
}
$.each(data.s, function(){
$('#word').append('<div class="click_work">'+ this +'</div>');
})
},
error:function(){
$('#word').empty().show();
$('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
}
})
})
//点击搜索数据复制给搜索框
$(document).on('click','.click_work',function(){
var word = $(this).text();
$('#text').val(word);
$('#word').hide();
// $('#texe').trigger('click');触发搜索事件
})
}) 转载请注明来源：jQuery+ajax搜索框输入关键字自动补全代码，仿百度搜索
本文永久链接地址：https://www.moyouyouw.cn/code/585.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论