前端ABC输入文字下面会有关键字索引，和百度是一样的，没有添加搜索功能。和之前的一篇文章功能一样，只是美化了样式。
另一篇帖子 百度搜索框效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
.demo{width: 400px;min-height: 300px;background:skyblue;margin:50px auto 0;text-align:center;padding:10px;}
.form{width:364px;margin:0 auto;height:52px;}
input{width:300px;height:50px;border:solid 1px #ccc;float:left;font-size:26px;text-indent:5px;}
button{width:60px;height:52px;border:solid 1px #ccc;float:left;}
li{text-align:left;line-height:30px;text-indent:10px;}
li:hover{background:rgba(0,0,0,0.7);color:#fff;}
#info{width:364px;margin:0 auto;}
#info ul{border:solid 1px #ccc;}
</style>
</head>
<body>
<div class="demo">
<div class="form">
<input type="text" id="txt"><button>搜索一下</button>
</div>
<div id="info"></div>
</div>
</body>
<script type="text/javascript">
function ajax(obj){
// 设置默认参数
var defauls = {
type:"get",
url:"#",
asynce:true,
data:{},
dataType:"json",
jsonp:"cb",
success:function(data){console.log(data);}
};
// 根据传入的参数修改默认参数
for( k in obj ){
defauls[k] = obj[k];
};
// 参数处理
var param = "";
for( attr in defauls.data ){
param += attr + "=" + defauls.data[attr] + "&";
};
param = encodeURI( param.substring(0,param.length - 1) );
if( param ){
param = "?" + param;
};
// 判断是jsonp跨域还是ajax异步请求
if( defauls.dataType == "jsonp" ){
// 设置自定义函数
var cd = "common" + ( "1.11.1" + Math.random() ).replace(/\D/g,"") + "_" + ( new Date().getTime() );
if( defauls.jsonpCallback ){
cd = defauls.jsonpCallback;
};
window[cd] = function(data){
defauls.success(data);
}
var script = document.createElement("script");
script.src = defauls.url + param + "&" + defauls.jsonp + "=" + cd;
var head = document.getElementsByTagName("head")[0];
head.appendChild( script );
}else{
// ajax异步请求
var xhr = null;
if( window.XMLHttpRequest ){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
};
// 准备发送
if( defauls.type == "get" ){
defauls.url += param;
};
xhr.open(defauls.type,defauls.url,defauls.asynce);
// 发送请求
var data = null;
if( defauls.type == "post" ){
data = param.substring(1,param.length);
xhr.setRequestHeader("Content-Type","Application/x-www-form-urlencoded");
};
xhr.send( data );
// 处理同步请求
if( !defauls.asynce ){
if( defauls.dataType == "json" ){
return JSON.parse( xhr.responseText );
};
return xhr.responseText;
};
// 异步请求处理服务器数据
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
var data = xhr.responseText;
if( defauls.dataType == "json" ){
data = JSON.parse( data );
};
defauls.success(data);
};
};
};
};
var txt = document.getElementById("txt");
txt.onkeyup = function(){
var kw = this.value;
document.getElementById("info").innerHTML = "";
ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
jsonp:"cb",
data:{wd:kw},
dataType:"jsonp",
success:function(data){
if( data.s.length !== 0 ){
var tag = document.createElement("ul");
for( i = 0; i < data.s.length; i++ ){
var els = document.createElement("li");
els.innerHTML = data.s[i];
tag.appendChild(els);
};
document.getElementById("info").appendChild(tag) ;
};
var lis = document.getElementsByTagName("li");
for( i = 0; i <lis.length; i++ ){
lis[i].onclick = function(){
var count = this.innerHTML;
txt.value = count;
document.getElementById("info").innerHTML = "";
}
};
}
});
};
</script>
</html>