运用js跨域实现百度搜索

  1. 需求分析:设计一个搜索框,当在文本框中输入内容的时候,点击按钮就可以进行搜索,跨域访问百度的搜索
  2. 设计思路:封装跨域访问函数,获取文本框元素的内容,绑定跨域访问函数,当点击执行的时候就会执行跨域访问,将搜索的结果显示为百度的搜索数据
  3. 实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度搜索</title>
</head>
<body>

<input type="text" id="q" placeholder="请输入要搜索的内容">
<button id="btn">搜索</button>
<ul id="list">

</ul>

</body>
<script>

function fn(data){

    var ul = document.getElementById("list");
    var html = "";
    if(data.s.length){
        ul.style.display = "block";
        for(var i=0;i<data.s.length;i++){
            html += '
  • +data.s[i]+ '">'+ data.s[i]+'
  • '
    ; // html += '
  • '+ data.s[i] +'
  • ';
    } ul.innerHTML = html; }else{ ul.style.display = "none"; } } let q = document.getElementById("q"); q.onkeyup = function(){ if(this.value != ''){ var script = document.createElement("script"); script.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn'; document.body.appendChild(script); }else{ ul.style.display = "none"; } } </script> </html>

    你可能感兴趣的:(Javascript)