vuejs写一个百度(localstorage+条数限制)

发表于2016-12-07 10:21:25

没用vuejs的组件,因为我现在还接受不了html写在js里面的恶心代码。。。。
主要是感受一下纯数据驱动。。。
对了支持键盘操作
问题解决,用一个自定义对象,通过这个对象存储所有的搜索数据就行了,对了  localStroge只能存字符串。。。有点坑,要自己转化


效果图:

图片.png


代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度按键精灵</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .search-box {
            width: 640px;
            margin: 50px auto;
        }
        .search-logo {
            width: 270px;
            margin: 0 auto;
        }
        .search-logo img {
            width: 100%;
        }
        .search-main {
            height: 80px;
        }
        .serch-main input {
            height: 100%;
        }
        .search-con {
            float: left;
            width: 522px;
            height: 20px;
            padding: 9px 7px;
            font: 16px arial;
            border: 1px solid #b8b8b8;
            border-bottom: 1px solid #ccc;
            border-right: 0;
            vertical-align: top;
            outline: none;
        }
        .search-con:focus {
            border-color: #38f;
        }
        .active {
            border-color: #38f;
        }
        .search-btn {
            float: left;
            cursor: pointer;
            width: 102px;
            height: 40px;
            border: 0;
            background: none;
            background-color: #38f;
            font-size: 16px;
            color: white;
            font-weight: normal;
        }
        .search-spirit {
            line-height: 24px;
            border:1px solid #ccc;
            list-style: none;
        }
        .search-spirit a {
            display: block;
            padding-left: 7px;
            color: #000;
            text-decoration: none;
        }
        .search-active {
            background:#f2f2f2;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" />
        </div>
        <div>
            <input type="text"  v-model="searchKey1" v-on:keyup="getData($event)"  v-on:keydown='keyGo($event)' v-on:blur="none()" v-on:focus='getHistory()' />
            <input type="button" value="百度一下" v-on:click='go()'/>
            <ul>
                <li v-for="data in searchList"><a href="javascript:;"  v-html="data.q" v-bind:class="{'search-active':$index==nowIndex}" v-on:mouseover="activeHover($index)" v-on:mouseout="leaveHover()" v-on:click="listGo(data.q)"></a></li>
            </ul>
        </div>
    </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
<script>
let vue = new Vue({
    el : 'body',
    data : {
        searchKey : '',
        searchKey1 :'',
        nowIndex : -1,
        historyArr : [],
        searchList : []
    },
    ready : function() {
        var storage = window.localStorage,
           obj = new Object();
        // window.localStorage.clear();
        if( storage.getItem('baidu') == null ) {
            storage.setItem('baidu', JSON.stringify(obj));//对象转字符串
        }
    },
    methods :  {
        getData : function(event) {
            if( event.keyCode===40 || event.keyCode===38 ) {
                return;
            }
            var oThis = this;
            oThis.searchKey = oThis.searchKey1;
            this.nowIndex = -1;
            $.ajax({
                type:"post",
                url : "http://suggestion.baidu.com/su?&wd="+ oThis.searchKey +"&json=1&p=3&cb=aa",
                dataType : 'jsonp',
                jsonp : 'aa',
                jsonpCallback : 'aa',
                success: function(data){
                    if(data.g) {
                        oThis.searchList = data.g;
                    }
                },
                error :function() {
                    console.log('接口报错,请拨打110');
                }
            });
            if( oThis.searchKey==='' ) {
                oThis.getHistory();
            }
        },
        go : function() {
            this.searchKey = this.searchKey1;
            this.setHistory(this.searchKey);
            window.location.href = 'https://www.baidu.com/s?wd=' + this.searchKey;
        },
        listGo :function (q) {
            this.setHistory(q);
            window.location.href = 'https://www.baidu.com/s?wd=' + q;
        },
        keyGo: function(event) {
            if(event.keyCode == 13) {
                this.go();
            }
            if( event.keyCode===40 ) {
                this.nowIndex ++;
                this.nowIndex === this.searchList.length ? this.nowIndex = 0 : '';
                this.searchKey1 = this.searchList[this.nowIndex].q;
            }
            if( event.keyCode===38 ) {
                this.nowIndex --;
                this.nowIndex === -1 ? this.nowIndex = this.searchList.length-1 : '';
                this.searchKey1 = this.searchList[this.nowIndex].q;
            }
        },
        none : function() {
            setTimeout(()=> {
                this.searchList = null;
                this.nowIndex = -1;
            },100);
        },
        activeHover: function(index) {
            this.nowIndex = index;
        },
        leaveHover : function() {
            this.nowIndex = -1;
        },
        setHistory : function(strKey) {
            var nowtime = (new Date()).getTime(),
               storage = window.localStorage,
               obj = JSON.parse(storage.getItem('baidu'));//字符串转对象
            if( !obj[strKey] ) { 
                obj[strKey] = nowtime;
                console.log(obj);
                storage.setItem('baidu', JSON.stringify(obj));//对象转字符串
            }
        },
        getHistory : function() {
            var storage = window.localStorage,
                length = 10,
                arr = [],
                obj = {},
                newObj = {};
            this.searchList = [];
            console.log(storage);
            obj = JSON.parse(storage.getItem('baidu'));//字符串转对象
            for(var x in obj) {
                arr.push(obj[x]);
            }
            arr.sort(function(a,b ) {
                return b-a;
            });
            arr.length>=10 ? length = 10 : length = arr.length;
            for(var i=0; i<length; i++) {
                for(var x in obj) {
                    if( obj[x]===arr[i] ) {
                        this.searchList.push({q : x});
                        newObj[x] = arr[i]; 
                    }
                }
            }
            storage.setItem('baidu', JSON.stringify(newObj));//对象转字符串
        }
    }
});
console.log(window.localStorage);
</script>
</body>
</html>


转载请注明出处,本文转载自:http://www.qdfuns.com/notes/15098/f6b2d90886a154658fc846ee3ab6cba4.html

评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论