Vue.js 2を使用して百度検索ボックスを模倣する

    
    
    
    
    
    
    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;
                    }
                }
            }
        });
    }
    



    

        
        

            

                {{item}}