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

本文详细介绍了如何使用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"
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值