模仿百度API接口搜索框

来源：互联网发布：六轴机械手臂编程编辑：程序博客网时间：2024/06/09 14:13

<!DOCTYPE html><html><head>    <title>模仿百度API</title>    <meta charset="utf-8">    <script type="text/javascript" src="js/vue-1.js"></script>    <script type="text/javascript" src="js/vue-resource.js"></script>    <style type="text/css">        .gray{            background: #ccc;        }    </style></head><body>    <div id="box">        <!-- 搜索内容 -->        <!-- @keydown.down ↓键盘事件 -->        <!-- @keydown.up ↑键盘事件 -->        <input type="text" v-model="keyWord" @keyup="get($event)" @keydown.down="changDown()" @keydown.up.prevent="changUp()" />        <!-- 搜索列表 -->        <ul>            <li v-for="v in lists" :class="{gray:$index==now}">                {{v}}            </li>        </ul>        <!-- 暂无数据 -->        <p v-show="lists.length==0">暂无数据....</p>    </div></body></html><script type="text/javascript">    new Vue({        el:"#box",        data:{            // 搜索关键字            keyWord:'',            // 搜索到的内容列表            lists:[],            // 选中下标地址            now:-1        },        methods:{            get:function(ev){                // 如果是上下键  返回不请求数据                if (ev.keyCode==38 || ev.keyCode==40 ) {                    return;                }                // 如果是回车键 就让他跳转对应的网址                if (ev.keyCode==13) {                    window.open('https://www.baidu.com/s?wd='+this.keyWord)                    this.keydown='';                }                // 数据请求                this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{                    // 参数值==关键字                    wd:this.keyWord                },{                    // 回调函数                    jsonp:'cb'                }).then(function(res){                    // 成功                    // console.log(res.data.s);                    // 数组 == lists                    this.lists = res.data.s;                },function(res){                    // 失败                    console.log(res.data);                })            },            changDown:function(){                this.now++;                // 当到达最后时候 lists.length 回到-1                if (this.now == this.lists.length) {                    this.now = -1;                    // 选中的数据给到搜索框                };                this.keyWord=this.lists[this.now];            },            changUp:function(){                this.now--;                // 当到达最小时候  回到lists.length-1                if (this.now == -2) {                    this.now = this.lists.length-1;                };                this.keyWord=this.lists[this.now];            }        }    })</script>

//请使用nodejs挂起服务器（这是后台代码）const express = require("express");const expressStatic = require("express-static");const bodyParser = require('body-parser');// 建立服务器var server = express();server.use(bodyParser.urlencoded());server.listen(8080);// 配置静态文件server.use(expressStatic("./www"));

阅读全文

0 0