jsonp -- 百度联想词

发布时间：2020-12-16 18:41:19 所属栏目：百科来源：网络整理

导读：免费的接口： 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:

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

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

1.HTML页面

????????<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数组中

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!