집 >웹 프론트엔드 >JS 튜토리얼 >JS를 사용하여 Baidu 검색창 프롬프트 기능을 구현하는 방법

JS를 사용하여 Baidu 검색창 프롬프트 기능을 구현하는 방법

一个新手원래의: 2017-09-21 10:46:372528검색

이 기능의 구현은 주로 jsonp 크로스 도메인 액세스를 사용하며 콜백 기능을 통해 검색된 관련 콘텐츠를 표시합니다.

JSONP(JSONwith Padding)은 서버 측에서 스크립트 태그를 통합하고 이를 클라이언트에 반환하여 자바스크립트 콜백 형식으로 도메인 간 액세스를 달성할 수 있는 비공식 프로토콜입니다(이는 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를 사용하여 Baidu 검색창 프롬프트 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：React 이벤트 시스템 지식다음 기사：React 이벤트 시스템 지식