模仿百度API接口搜索框

<!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-resourc

Facing_the_Giants

3819人浏览 · 2017-06-14 19:01:22

Facing_the_Giants · 2017-06-14 19:01:22 发布

<!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"));

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^