藉助baidu的jsonp介面，做一個自己的候選片語件
阿新 • • 發佈：2018-12-12
先觀察
對介面進行提煉：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回撥函式
簡單測試一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>百度候選詞</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
let test = (data) => {
console.log(data);
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dn&cb=test"></script>
</head>
<body>
<!-- https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回撥函式 -->
</body>
</html>
效果：
嘗試把內容放入一個ul內：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度候選詞</title>
</head>
<body>
<ul id="myul"></ul>
<script>
// 為什麼放ul的下面，可以看這篇文章：https://www.cnblogs.com/dotnetcrazy/p/10106976.html
let test = (json) => {
let ulobj = document.getElementById("myul");
json.s.forEach(item => {
let liobj = document.createElement("li");
liobj.innerHTML = item;
ulobj.appendChild(liobj);
});
}
// https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回撥函式
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dn&cb=test"></script>
</body>
</html>
效果：
根據input輸入動態獲取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度候選詞</title>
<script>
// https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回撥函式
let show_ul = (json) => {
let ul_obj = document.getElementById("myul");
ul_obj.innerHTML = ""; // 清空現在的ul
console.log(json.s);
json.s.forEach(item => {
let li_obj = document.createElement("li");
li_obj.innerHTML = item;
ul_obj.appendChild(li_obj);
});
}
window.onload = () => {
let input_obj = document.getElementById("myinput");
input_obj.oninput = () => {
// 用script載入的方式，只會執行一次，不滿足我們的需求，so ==> 動態建立
let script_obj = document.createElement("script");
script_obj.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(input_obj.value)}&cb=show_ul`
document.body.appendChild(script_obj); //新增到body裡面
}
}
</script>
</head>
<body>
<input type="text" id="myinput" />
<ul id="myul"></ul>
</body>
</html>
效果：
線上測試
可行，下面就美化，然後放入自己專案的input中了