vue+百度下拉框

来源：互联网发布：mac变色龙引导工具编辑：程序博客网时间：2024/06/15 05:21
搜索框实现：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>
阅读全文
0 0