Ajax跨域实现淘宝/百度搜索下拉提示效果

最近学到Ajax，觉得自己对与前后端的数据交互有了一个基本的了解。下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例，就是输入一个词，下拉框中自动显示匹配的内容：

aaarticlea/png;base64,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" alt="" />

页面的布局比较简单，就是一个input输入框和一个下拉的ul列表：

<body>
    <input type="text" id="q" />
    <ul id="ul1"></ul>
</body>

给两个框加上简单的样式，ul的display:none;后续在js里面创建元素：

<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>

js中用到Ajax跨域解决方案JSONP：在页面创建一个script标签，设置src属性，加入参数，用函数angel(data)处理获取过来的数据，将数据加入到ul列表中，点击下拉列表中的数据跳转到百度搜索页面：

<script>
function angel(data) {

    var oUl = document.getElementById('ul1');
    var html = '';
    if (data.s.length) {
        oUl.style.display = 'block';
        for (var i=0; i<data.s.length; i++) {
            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
        }
        oUl.innerHTML = html;
    } else {
        oUl.style.display = 'none';
    }

}
window.onload = function() {

    var oQ = document.getElementById('q');
    var oUl = document.getElementById('ul1');

    oQ.onkeyup = function() {

        if ( this.value != '' ) {
            var oScript = document.createElement('script');
            oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=angel';
            document.body.appendChild(oScript);
        } else {
            oUl.style.display = 'none';
        }
    }
}
</script>