Vue入门百度搜索列表（跨域）

Posted 2020-10-20 yulingjia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue入门百度搜索列表（跨域）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <style>
        .current{
            background-color:#ccc;
        }
    </style>
    <script src="https://unpkg.com/vue"></script>
    <script src="vue-resource/vue-resource.min.js"></script>
    <script>

        window.onload=function(){
            let app = new Vue({
                el:\'.container\',
                data:{
                    keyWord:\'\',
                    myData:{},
                    nowIndex:-1 //当前选中项的索引
                },
                methods:{ 
                    getData(e){
                        //如果按方向上下键，则不发送请求
                        if(e.keyCode==38||e.keyCode==40)
                        return;
                        
                        this.$http.jsonp(\'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su\',{
                            params:{
                                wd:this.keyWord
                            },
                            jsonp:\'cb\' //百度使用的jsonp的参数名为 cb 
                        }).then(response => {
                            console.log(response.body.s);
                            this.myData=response.body.s; //把数据存起来
                        },response => {
                            console.log(\'发送失败\');
                        })
                    },
                    changeDown(){
                        this.nowIndex==this.myData.length-1?this.nowIndex = -1:this.nowIndex++;
                        this.keyWord=this.myData[this.nowIndex];
                        console.log(this.nowIndex,this.myData.length);
                    },
                    changeUp(){
                        this.nowIndex < 0?this.nowIndex = this.myData.length-1:this.nowIndex--;
                        this.keyWord=this.myData[this.nowIndex];
                        console.log(this.nowIndex,this.myData.length);
                    }
                }
            })
        }

    </script>

</head>

<body>

<div class="container">
    <input type="text" v-model="keyWord" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp">
    <!-- 把数据存起来展示 -->
    <ul>
        <li v-for="(value,index) in myData" :class="{current:index==nowIndex}">
            {{value}}
        </li>
    </ul>
    <p v-show="myData.length == 0">暂无数据</p>
</div>

</body>

</html>

效果：

以上是关于Vue入门百度搜索列表（跨域）的主要内容，如果未能解决你的问题，请参考以下文章

使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作附源码和在线测试地址