<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<style>
*{margin:0;padding: 0;}
.text{position: relative;}
.text input{width:200px;height: 35px;line-height: 35px;padding-left: 10px;border:2px solid #0095ea;border-radius: 3px;position: relative;z-index: 2;;}
.text ul{position: absolute;top: 38px;left: 0;border: 1px solid #abb9c1;display: none;background: #fff;z-index: 1;}
.text ul li{height: 25px;min-width:192px; line-height: 25px;padding:0 10px;list-style: none;cursor: pointer;font-size: 12px;}
.text ul li:hover{background: #ccc;}
</style>
<div class="text">
<input type="text" />
<ul></ul>
</div>
<script>
window.onload=function(){
var tel;
$(".text input").bind('input propertychange',function(){
tel=$(this).val();
console.log(tel)
$(this).siblings("ul").show();
$(this).siblings("ul").html('');
$.ajax({
type:"get", //请求方式
async:true, //是否异步
url:"https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+tel, //360接口
dataType:"jsonp", //跨域json请求一定是jsonp
jsonp: "callback", //跨域请求的参数名，默认是callback
jsonpCallback: "suggest_so", //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
//jsonpCallback:"successCallback", //自定义跨域参数值，回调函数名也是一样，默认为jQuery自动生成的字符串
beforeSend: function() {
console.log(1)
//请求前的处理
},
success: function(data) {
var _html='';
for(var i=0;i<data.result.length;i++){
_html +='<li>'+data.result[i].word+'</li>';
}
$(".text ul").html(_html)
//请求成功处理，和本地回调完全一样
},
complete: function() {
console.log(2)
//请求完成的处理
},
error: function() {
//请求出错处理
console.log(3)
}
});
});
$(".text").on('click','ul li',function(){
$(this).parent().siblings('input[type=text]').val($(this).text());
$(this).parent().hide();
})
}
</script>
</body>
</html>
