jsonp -- 百度联想词

免费的接口： http://www.bejson.com/knownjson/webInterface/

原博： https://blog.csdn.net/jbj6568839z/article/details/81416132

1.HTML页面

<div class="wrapper">

        <input type="text" class="text">

        <ul></ul>

    </div>

2.css

   

* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.wrapper {
		margin: 100px;
	}

	.text {
		height: 40px;
		width: 300px;
	}

	.wrapper ul {
		width: 300px;
		border: 1px solid #ccc;
		height: 200px;
		display: none;
	}

3.js代码

var Oinput = document.getElementsByTagName('input')[0];
    var oUl = document.getElementsByTagName('ul')[0];
    Oinput.oninput = function () {
        // 获取输入的值
        var value = this.value;     
        var oScript = document.createElement('script');
        // 键值对和回调函数必须有
        oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ value +'&cb=aa'
        document.body.appendChild(oScript);
    }

        function aa(data){
           oUl.style.display = 'block';
          //  获取数据中s的值    ps：输入值时把可能的获取的联想词放入到s数组中
            var list = data.s;
            var str = '';
            // 通过遍历把输入的值显示到页面上
            list.forEach(function(ele,index){
                str += '<li>'+ ele +'</li>';
            })
            oUl.innerHTML = str;
        }

4.有时输入过多，ul会没有，因为后台无内容，但script标签还是会一直创建，这时需要判断

function aa(data){
           //  获取数据中s的值    ps：输入值时把可能的获取的联想词放入到s数组中
              var list = data.s;   
             var str = '';
             if(list.length > 0){
            // 通过遍历把输入的值显示到页面上
             list.forEach(function(ele,index){
                 str += '<li>'+ ele +'</li>';
           })
                   oUl.innerHTML = str;
                   oUl.style.display = 'block';
        }else{
            oUl.style.display = 'none';
      }           
   }

 

5.输入时，会点击词进入某个页面，这时需要在li标签里设置超链接

function aa(data){
            console.log(data)
            // oUl.style.display = 'block';
           //  获取数据中s的值    ps：输入值时把可能的获取的联想词放入到s数组中
              var list = data.s;   
             var str = '';
             if(list.length > 0){
            // 通过遍历把输入的值显示到页面上
             list.forEach(function(ele,index){
                 str += '<li><a href=https://www.baidu.com/s?wd='+ ele +'>'+ ele +'</a></li>';
           })
                   oUl.innerHTML = str;
                   oUl.style.display = 'block';
        }else{
            oUl.style.display = 'none';
      }           
   }


完整代码如下：  var Oinput = document.getElementsByTagName('input')[0];

var oUl = document.getElementsByTagName('ul')[0];
    Oinput.oninput = function () {
        // 获取输入的值
        var value = this.value;    
         var oScript = document.createElement('script');
        // 键值对和回调函数必须有
        oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ value +'&cb=aa'
        document.body.appendChild(oScript);
        // oScript.remove();
      }
       

        function aa(data){
            console.log(data)
            // oUl.style.display = 'block';
           //  获取数据中s的值    ps：规定。输入值时把可能的获取的联想词放入到s数组中
             var list = data.s;   
             var str = '';
             if(list.length > 0){
            // 通过遍历把输入的值显示到页面上
             list.forEach(function(ele,index){
                 str += '<li><a href=https://www.baidu.com/s?wd='+ ele +'>'+ ele +'</a></li>';    ps:https://www.baidu.com/s?wd=刘诗诗     刘诗诗为当前输入的值
           })
                   oUl.innerHTML = str;
                   oUl.style.display = 'block';
        }else{
            oUl.style.display = 'none';
      }  
   }

总结：

     1.先创建input标签

     2.给input标签绑定事件

     3.获取输入的值

     4.动态创建script标签，使其在页面添加标签      ps:页面获取的值为用户输入的值，需使用回调函数显示到页面上

     5.进行数据筛选   ps:写一个回调函数

     6.遍历得到的值，添加到获取数据中的s数组中

来源：oschina

链接：https://my.oschina.net/u/4271149/blog/3552963