模仿百度API接口搜索框

最新推荐文章于 2025-07-09 11:26:56 发布

原创最新推荐文章于 2025-07-09 11:26:56 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

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

21 篇文章

订阅专栏

代码片

6 篇文章

订阅专栏

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