Home >Web Front-end >JS Tutorial >How to use JS to implement Baidu search box prompt function

How to use JS to implement Baidu search box prompt function

一个新手Original: 2017-09-21 10:46:372529browse

The implementation of this function mainly uses jsonp cross-domain access, and then displays the searched related content through the callback function.

JSONP(JSONwith Padding) is an unofficial protocol that allows integrating Script tags on the server side and returning them to the client, achieving cross-domain access in the form of javascript callback ( This is just a simple implementation of JSONP).

Callback function: When a function is used as a parameter of another function, then this function is a callback function.

The effect is as follows

<!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>

The above is the detailed content of How to use JS to implement Baidu search box prompt function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：React event system knowledgeNext article：React event system knowledge

See more

How to use JS to implement Baidu search box prompt function

Related articles