Common.js
//封裝類名
function byClassName(sClassName){
if(document.getElementsBYClassName){
return document.getElementsByClassName(sClassName);
} else {
var allTagsName = document.getElementsByTagName('*');
var result = [];
for(var i = 0; i<allTagsName.length;i++){
if(allTagsName[i].className === sClassName){
result.push(allTagsName[i]);
}
}
return result;
}
}
index.js
var oTxt = byClassName('txt')[0];
var oBtn = byClassName('btn')[0];
var oList = byClassName('list')[0];
oTxt.onpropertychange = oTxt.oninput = function(){
// 先創建一個script標簽,引入接口
var oScript = document.createElement('script');
oScript.src = 'https://suggest.taobao.com/sug?code=utf-8&q='+ this.value+'&_ksTS=1519875402602_594&callback=callback';
// 將script標簽添加到頁面中
document.body.appendChild(oScript);
// 移除標簽
document.body.removeChild(oScript);
}
//創建回調函數接收數據
function callback(data){
oList.innerHTML = '';
data.result.forEach( v => {
var oLi = document.createElement('li');
oLi.innerHTML = v;
oList.appendChild(oLi);
oLi.onclick = function(){
oTxt.value = oLi.innerHTML;
oList.innerHTML = '';
}
});
}
HTML（百度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
form[name=search-form] {
margin: 40px auto 0;
width: 640px;
}
input[name='search-content'] {
width: 600px;
line-height: 30px;
border:1px solid #ccc;
vertical-align: bottom;
outline: none;
}
input[name='search-btn'] {
width: 40px;
height: 32px;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
}
#list {
list-style: none;
margin: 0 auto;
width: 640px;
}
#list li {
padding: 10px 4px;
border-bottom: 1px dashed #eee;
}
</style>
</head>
<body>
<form action="javascript:;" name="search-form">
<input type="text" name="search-content"><input type="submit" name="search-btn">
</form>
<ul id="list"></ul>
<script>
var oForm = document.forms['search-form'];
var oContent = oForm.elements['search-content'];
var oList = document.getElementById('list');
// 定義回調函數
function callback(data) {
oList.innerHTML = '';
data.s.forEach( v => {
var oLi = document.createElement('li');
oLi.innerHTML = v;
oList.appendChild(oLi);
});
}
oContent.onpropertychange = oContent.oninput = function () {
var oScript =document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1&cb=callback';
document.body.appendChild(oScript);
document.body.removeChild(oScript);
};
</script>
</body>
</html>
HTML（淘寶）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>跨域請求數據</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
form{
width: 640px;
margin: 30px auto 0;
position: relative;
}
input{
box-sizing: border-box;
outline: none;
}
.txt{
width: 600px;
line-height: 30px;
vertical-align: bottom;
border: 1px solid #ccc;
}
.btn{
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: pointer;
}
.list{
position: absolute;
}
.list li{
width: 592px;
padding: 10px 4px;
cursor: pointer;
}
.list li:hover{
background: #eee;
}
</style>
</head>
<body>
<form action="javascript:;">
<input class="txt" type="text" /><input class="btn" type="submit" />
<ul class="list"></ul>
</form>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>
兩者實現思路都是一樣的，進入其對應的官方網站，在輸入內容看，打開控制面板查看其請求的api接口，然后將api接口復制過來，通過創建回調接受，然后根據輸入的文本框的內容進行動態li的創建，刪除即可實現。