JS에서 Baidu 검색 인터페이스를 구현하는 방법
- 亚连원래의
- 2018-06-08 11:02:222813검색
이 글에서는 Baidu 검색 인터페이스와 링크 기능을 구현하기 위한 JS의 예제 코드를 주로 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.
이 글에서는 JS에서 Baidu 검색 인터페이스와 링크 기능을 구현하는 방법을 구체적으로 소개합니다. 코드는 다음과 같습니다.
지난 기사에서는 Baidu 검색 기능을 구현하기 위해 JS를 소개했습니다
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>anchor</title>
<style>
*{
margin:0;
padding:0;
}
#wei{
width:500px;
height:600px;
margin:0 auto;
border:0px solid gray;
}
#wei input{
width:476px;
height:50px;
line-height: 50px;
padding-left:20px;
font-size: 16px;
}
#wei ul{
height:auto;
border:1px solid #ccc;
display: none;
}
#wei ul li{
width:100%;
height:30px;
line-height: 30px;
text-indent:10px;
font-size: 16px;
list-style: none;
}
#wei ul li a{
text-decoration:none;
}
#wei ul li:hover{
display:block;
background:#ccc;
color:#fff;
}
</style>
</head>
<body ng-controller="show">
<p id="wei">
<input type="text" id="text">
<ul id="list"></ul>
</p>
<script type="text/javascript">
var txt = document.getElementById("text");
var oUl = document.getElementById("list");
txt.onkeyup = function(){
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){
var str="";
for(var i=0;i<data.s.length;i++){
str += "<li><a href=\"https://www.baidu.com/s?wd="+data.s[i]+"\">"+data.s[i]+"</a></li>";
}
//console.log(str);
oUl.innerHTML=str;
oUl.style.display="block";
}
</script>
</body>
</html>위 내용은 제가 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
Koa2에서 async&await의 사용법은 무엇인가요?
zTree 트리 플러그인에서 전국 5단계 지역의 클릭 로딩을 구현하는 방법
노드+익스프레스 개인화 대화방을 구현하는 방법은 무엇입니까?
위 내용은 JS에서 Baidu 검색 인터페이스를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.