vue使用百度搜索接口实现下拉搜索效果

最新推荐文章于 2025-04-22 21:38:14 发布

今天胖了吗-879

最新推荐文章于 2025-04-22 21:38:14 发布

阅读量1.8k

点赞数 1

分类专栏：前端文章标签： json ajax vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42425146/article/details/119778383

版权

本文详细介绍了如何使用Vue.js初始化项目并实现一个带有下拉搜索框的功能，包括样式设计和JavaScript交互。在实现过程中，利用百度搜索API获取数据，并运用sessionStorage进行本地缓存，避免重复请求。同时，实现了焦点和失去焦点时的下拉显示与隐藏，以及使用方向键选择搜索词条的功能。遇到的问题包括事件监听和本地缓存的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、初始化vue-cli项目

二、实现界面样式

三、JavaScript部分

写一下实现代码以及在这里记录一下自己遇到的问题

数据接口使用的百度搜索api，这里还运用了一下sessionStorage缓存，接口调用成功后将数据缓存到本地，如果本地有数据就用本地数据，避免重复调用接口。

先上图

一、初始化vue-cli项目

vue init webpack my-project

因为要使用sass所以得安装node-sass

这里可能会有版本过高现象，如果运行报错就卸载安装对应版本

1. sass-loader依赖于node-sass,所以要安装node-sass

cnpm install node-sass --save-dev       //安装node-sass
cnpm install sass-loader --save-dev         //安装依赖包sass-loader
cnpm install style-loader --save-dev        //安装style-loader

2. 在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
},

二、实现界面样式

html部分，界面样式是模仿百度搜索框做的效果

<template>
  <div class="search-from">
    <div style="text-align: center;">{
  { msg }}</div>
    <div class="search">
      <input
        type="text"
        placeholder="请输入搜索内容"
        class="s-input"
        v-model="keyword"
        v-on:focus="focus()"
        v-on:blur="blur()"
        @keyup="getData($event)"
        @keydown.down.prevent="selectDown"

最低0.47元/天解锁文章