使用 Vue.js 2 模仿百度搜索框

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue demo</title>
    <style type="text/css">
    .bg {
        background: #ccc;
    }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
    <script type="text/javascript">
    window.onload = function() {
        new Vue({
            el: '#box',
            data: {
                inputText: '',
                text: '',
                nowIndex: -1,
                result: []
            },
            methods: {
                show: function(ev) {
                    if (ev.keyCode == 38 || ev.keyCode == 40) {
                        if (this.nowIndex < -1){
                            return;
                        }
                        if (this.nowIndex != this.result.length && this.nowIndex != -1) {
                            this.inputText = this.result[this.nowIndex];
                        }
                        return;
                    }
                    if (ev.keyCode == 13) {
                        window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
                        this.inputText = '';
                    }
                    this.text = this.inputText;
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                        params: {
                            wd: this.inputText
                        },
                        jsonp: 'cb'
                    }).then(res => {
                        this.result = res.data.s;
                    })
                },
                down: function() {
                    this.nowIndex++;
                    if (this.nowIndex == this.result.length) {
                        this.nowIndex = -1;
                        this.inputText = this.text;
                    }
                },
                up: function() {
                    this.nowIndex--;
                    if (this.nowIndex < -1){
                        this.nowIndex = -1;
                        return;
                    }
                    if (this.nowIndex == -1) {
                        this.nowIndex = this.result.length;
                        this.inputText = this.text;
                    }
                }
            }
        });
    }
    </script>
</head>

<body>
    <div id="box">
        <input type="text" placeholder="請(qǐng)輸入搜索內(nèi)容" v-model='inputText' @keyup='show($event)' @keydown.down='down()' @keydown.up.prevent='up()'>
        <ul>
            <li v-for="(item, index) in result" :class='{bg: index==nowIndex}'>
                {{item}}
            </li>
        </ul>
    </div>
</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容