Vue2.0组件实现动态搜索引擎（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/qwezxc24680/article/details/75066663

本文介绍了如何在Vue2.0中构建一个动态搜索引擎组件，包括关键字输入框、搜索建议下拉列表和搜索跳转按钮。使用了vue-resource进行JSONP跨域请求，实现输入关键字时实时显示搜索建议。同时，文章还涉及了子组件与父组件间的数据通信，以及通过键盘上下键选择搜索建议的功能。

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

接上一篇，完成logo部分我们就要开始整个项目的核心——panel组件。

整个panel组件分为3个部分：关键字输入框，相关搜索建议下拉列表和搜索跳转按钮。

由于我们整个项目是设计成父子组件的架构所以在父组件即panel部分开头需要引入子组件：

HTML:

<logo-select @logoNow="changeSource"></logo-select>

JS：

import logoSelect from './logo-new.vue';

export default {
  components: {
    logoSelect //等价于logoSelect: logoSelect
  }

注意使用相对路径不要照搬。

目前的效果如下。

接下来做我们的搜索框，这一步比较简单，设置一个input再用v-model做一个双向绑定到data：

<input type="text" v-model="msgInput">

data: function () {
      return {
        msgInput: '',
        ...
      }
}

顺便加上一个“X”span，方便清空输入栏:

<span class="markDelete" @click="clearInput">x</span>

methods: {
      clearInput: function () {
          this.msgInput = '',//清空输入框
          this.results = ''//清空搜索建议数组
      },

...

这里比较偷懒用了个X字符代替清除按钮，对样式有追求的童鞋可以找个美观的图片，其他不变。

接下来就是核心功能：如何输入关键字就能自动弹出下拉菜单并且给出搜索建议？

由于我们要做的动态搜索建议，必然要使用其他搜索引擎的接口，那么跨域就成了主要技术难点。

翻阅了相关资料，使用jsonp跨域最为方便，Vue使用jsonp就要考虑vue-resource；

如果是第一次使用就要命令行安装：

npm install vue-resource --save

先在main.js引入vue-resource:

var vueResource = require('vue-resource');
Vue.use(vueResource);