百度搜索框关键词联想案例【原生JS】

百度搜索框关键词联想案例【原生JS】 第2张插图

在输入框输入关键词后,实时动态的在ul li里面显示联想词!

```<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>百度下拉</title> </head> <body> <input type="text" id="wd"> <ul id="keys"></ul> </body> <script> // 回调函数 function key(data) { const keys = document.getElementById("keys"); keys.innerHTML = (data.s).join('<br>'); } // 选择ID为wd的元素 const wd = document.getElementById("wd"); // 键盘松开发生的事件 wd.onkeyup = function () { // 删除左右两端的空格 var str = this.value.replace(/(^\s*)|(\s*$)/g, ''); // 判断去除空格之后是否为空 if (str.length !== 0) { // 生成script var oSrc = document.createElement("script") // cb:Callback(回调) 这里不懂自行查询 oSrc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + str + "&cb=key"; document.body.appendChild(oSrc) } } </script> </html>```
免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
如若转载,请注明出处:https://www.zxki.cn/2221.html

上一篇 2021-12-3 15:34
下一篇 2021-12-4 21:44

相关推荐

发表评论

为了防止灌水评论,登录后即可评论!

还没有评论,快来抢沙发吧!