vue+百度下拉框

最新推荐文章于 2024-08-03 23:56:34 发布

秋天1014童话

最新推荐文章于 2024-08-03 23:56:34 发布

阅读量1.2k

点赞数 1

分类专栏： web前端 javaScript Vue框架

本文链接：https://blog.csdn.net/u013217071/article/details/72235568

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

Vue框架

12 篇文章 0 订阅

订阅专栏

搜索框实现：vue-resource查询数据，事件交互实现，@click.up=”“

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .gray {
        background-color: gray;
    }

    #box ul li {
        cursor: pointer;
    }
    </style>
</head>

<body>
    <div id="box">
        <input type="text" v-model="searchText" @keyup="searchMethod($event)" @keydown.up="changeUp($event)" @keydown.down="changeDown($event)">
        <ul @mouseout="nowIndex=-1">
            <li v-for="value in searchData" v-text="value" :class="{gray:$index==nowIndex}" @mouseover="changeMouseOver($index)" @click="searchClick($index)">
            </li>
        </ul>
        <span v-show="searchData.length==0">暂无数据...</span>
    </div>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
    <script>
    new Vue({
        el: '#box',
        data: {
            searchText: '',
            searchData: [],
            nowIndex: -1
        },
        methods: {
            searchMethod: function(ev) {
                if (ev.keyCode == 13) {
                    this.searchClick();
                }
                if (ev.keyCode == 38 || ev.keyCode == 40) {
                    return false;
                }

                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                    wd: this.searchText
                }, {
                    jsonp: 'cb'
                }).then(function(res) {
                    this.searchData = res.data.s;
                }, function(res) {
                    alert(res.status);
                });
            },
            changeDown: function(ev) {
                this.nowIndex++;
                if (this.nowIndex == this.searchData.length) {
                    this.nowIndex = -1;
                }
                this.searchText = this.searchData[this.nowIndex];
            },
            changeUp: function(ev) {
                this.nowIndex--;
                if (this.nowIndex == -2) {
                    this.nowIndex = this.searchData.length - 1;
                }
                this.searchText = this.searchData[this.nowIndex];
            },
            changeMouseOver: function(index) {
                this.nowIndex = index;
                this.searchText = this.searchData[this.nowIndex];
            },
            searchClick: function() {
                window.open('https://www.baidu.com/s?f=8&rsv_bp=1&rsv_idx=1&word=' + this.searchText);
                this.searchText = '';
                this.nowIndex = -1;
            }
        }
    });
    </script>
</body>

</html>