实现跨域 jsonp 方式百度联想关键词搜索

百度联想搜索

// html
<p><input type="text"></p>
    <ul>
        <li></li>
    </ul>

	// 逻辑区
    <script>
        //输入框
        var oInp = document.getElementsByTagName('input')[0];
        //得到的数据存在ul的li里
        var oUl = document.getElementsByTagName('ul')[0];
        //获取输入内容，查找百度对应的src
        oInp.oninput = function () {
            var value = this.value;
            var oScript = document.createElement('script');
            oScript.src = 'http://suggestion.baidu.com/su?wd=' + value + '&cb=doJosn';
            document.body.appendChild(oScript);
        }
        //对传回的数据进行处理（回调函数）
        function doJosn(data) {
            var s = data.s;
            var str = '';
            console.log(data)
            if (s.length > 0) {
                s.forEach(function (item, index) {
                    str += '<li><a href =http://suggestion.baidu.com/su?wd=' + item + '>' + item + '</a></li>';
                })
                oUl.innerHTML = str;
                oUl.style.display = 'block';
            } else {
                oUl.style.display = 'none';
            }
     
        }
     
    </script>
var foo = 'bar';