如何用Js实现百度搜索框提示功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何用Js实现百度搜索框提示功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2364字,纯文字阅读大概需要4分钟。
内容图文
![如何用Js实现百度搜索框提示功能](/upload/InfoBanner/zyjiaocheng/299/a9902782e1bb42e4804115ea2b71c20d.jpg)
JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
回调函数:当一个函数作为另一个函数的参数时,那么这个函数就是回调函数。
效果如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #wei{ width:500px; height:600px; border:0px solid gray; position: relative; margin: 300px auto; } #text{ width:476px; height:50px; line-height: 50px; padding-left:20px; font-size: 16px; position: absolute; } #list{ height:auto; border:1px solid #ccc; display: none; position: absolute; top: 53px; } #wei ul li{ width:498px; height:30px; line-height: 30px; text-indent:10px; font-size: 16px; list-style: none; color: #000; } #wei ul li a{ text-decoration:none; color: #000; } #wei ul li:hover{ display:block; background:#ccc; color:#fff; } #btn{ width: 80px; height: 54px; background: deepskyblue; outline: none; border: 0; position: absolute; left: 500px; color: #fff; } p{ height: 58px; } </style> </head> <body ng-controller="show"> <p id="wei"> <p> <input type="text" id="text"> <input type="button" name="btn" id="btn" value="百度一下" /> </p> <ul id="list"></ul> </p> <script type="text/javascript"> var txt = document.getElementById("text"); var oUl = document.getElementById("list"); var oBtn = document.getElementById("btn"); txt.onkeyup = function(){ oUl.innerHTML = ""; var val = txt.value; var oScript = document.createElement("script");//动态创建script标签 oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback"; //添加链接及回调函数 document.body.appendChild(oScript);//添加script标签 document.body.removeChild(oScript);//删除script标签 } //回调函数 function callback(data){ data.s.forEach(function(value){ var oLi = document.createElement("li"); oLi.innerHTML = "<a href=\"https://www.baidu.com/s?wd="+ value + "\">"+ value + "</a>"; oUl.appendChild(oLi); }) oUl.style.display = "block"; } //点击跳转到百度页面,并搜索其中内容 oBtn.onclick = function(){ var val = txt.value; location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3"; } </script> </body> </html>
以上就是如何用Js实现百度搜索框提示功能的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何用Js实现百度搜索框提示功能全部内容,希望文章能够帮你解决如何用Js实现百度搜索框提示功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。