基于vue实现多引擎搜索及关键字提示

实现基于Vue的多引擎搜索及关键字提示主要包括以下步骤：

构建基础页面结构

在HTML文件中，构造基础的页面结构，包括搜索框和搜索按钮等必要的组件。同时，引入Vue.js库和相关依赖。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基于Vue的多引擎搜索及关键字提示</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>多引擎搜索及关键字提示</h1>
      <input type="text" v-model="searchText" v-on:input="search">
      <button v-on:click="search">搜索</button>
      <ul>
        <li v-for="engine in engines">
          <a v-bind:href="engine.searchUrl + encodeURIComponent(searchText)" target="_blank">{{ engine.name }}</a>
        </li>
      </ul>
    </div>
  </body>
</html>

定义搜索引擎数据

在Vue实例中，定义搜索引擎数据，包括引擎名称、搜索URL等相关信息，以数组形式存储。

var app = new Vue({
  el: '#app',
  data: {
    searchText: '',
    engines: [
      {
        name: '百度',
        searchUrl: 'https://www.baidu.com/s?wd='
      },
      {
        name: 'Google',
        searchUrl: 'https://www.google.com/search?q='
      }
    ]
  },
  methods: {
    search: function() {
      // 实现搜索逻辑
    }
  }
})

实现搜索逻辑

在Vue实例中，实现搜索逻辑，根据用户输入的搜索关键字以及选择的搜索引擎，生成对应的搜索URL，跳转到相应的搜索结果页面。此外，还可以利用第三方API获取搜索关键字的自动提示。

var app = new Vue({
  el: '#app',
  data: {
    searchText: '',
    engines: [
      {
        name: '百度',
        searchUrl: 'https://www.baidu.com/s?wd='
      },
      {
        name: 'Google',
        searchUrl: 'https://www.google.com/search?q='
      }
    ],
    suggestions: []
  },
  methods: {
    search: function() {
      if (this.searchText) {
        this.engines.forEach(function(engine) {
          window.open(engine.searchUrl + encodeURIComponent(this.searchText));
        }.bind(this));
      }
    },
    getSuggestions: function() {
      if (this.searchText) {
        var url = 'https://suggest.taobao.com/sug?code=utf-8&q=' + encodeURIComponent(this.searchText);
        axios.get(url)
          .then(function(response) {
            this.suggestions = response.data.result;
          }.bind(this))
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.suggestions = [];
      }
    }
  }
})

添加关键字提示功能

利用第三方API获取搜索关键字的自动提示，实现关键字提示功能。当用户输入搜索关键字时，通过AJAX异步加载关键字列表，并显示在页面上。

<div id="app">
  <h1>多引擎搜索及关键字提示</h1>
  <input type="text" v-model="searchText" v-on:input="getSuggestions" v-on:keyup.enter="search">
  <button v-on:click="search">搜索</button>
  <ul>
    <li v-for="suggestion in suggestions">
      <a v-bind:href="'https://www.baidu.com/s?wd=' + encodeURIComponent(suggestion[0])" target="_blank">{{ suggestion[0] }}</a>
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    searchText: '',
    engines: [
      {
        name: '百度',
        searchUrl: 'https://www.baidu.com/s?wd='
      },
      {
        name: 'Google',
        searchUrl: 'https://www.google.com/search?q='
      }
    ],
    suggestions: []
  },
  methods: {
    search: function() {
      if (this.searchText) {
        this.engines.forEach(function(engine) {
          window.open(engine.searchUrl + encodeURIComponent(this.searchText));
        }.bind(this));
      }
    },
    getSuggestions: function() {
      if (this.searchText) {
        var url = 'https://suggest.taobao.com/sug?code=utf-8&q=' + encodeURIComponent(this.searchText);
        axios.get(url)
          .then(function(response) {
            this.suggestions = response.data.result;
          }.bind(this))
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.suggestions = [];
      }
    }
  }
})

示例说明

下面是两个示例说明：

示例1：实现搜狗搜索引擎的支持

在Vue实例的数据部分添加搜狗搜索引擎的配置信息：

data: {
  searchText: '',
  engines: [
    {
      name: '百度',
      searchUrl: 'https://www.baidu.com/s?wd='
    },
    {
      name: 'Google',
      searchUrl: 'https://www.google.com/search?q='
    },
    {
      name: '搜狗',
      searchUrl: 'https://www.sogou.com/web?query='
    }
  ],
  suggestions: []
},

修改搜索逻辑部分，将搜索引擎根据用户选择的不同进行不同的跳转：

search: function() {
  if (this.searchText) {
    this.engines.forEach(function(engine) {
      if (engine.name === '搜狗') {
        window.open(engine.searchUrl + encodeURIComponent(this.searchText));
      } else {
        location.href = engine.searchUrl + encodeURIComponent(this.searchText);
      }
    }.bind(this));
  }
}

示例2：改变自动提示的来源为百度API

调用百度API获取关键字自动提示信息，并将结果展示在页面上。需要在getSuggestions方法里修改API的URL和参数：

getSuggestions: function() {
  if (this.searchText) {
    var url = 'http://suggestion.baidu.com/su';
    var params = {
      wd: this.searchText,
      cb: 'callback'
    };
    axios.jsonp(url, {params: params})
      .then(function(response) {
        this.suggestions = response.s;
      }.bind(this))
      .catch(function(error) {
        console.log(error);
      });
  } else {
    this.suggestions = [];
  }
}

同时，修改页面结构，展示百度API返回的结果：

<ul>
  <li v-for="suggestion in suggestions">
    <a v-bind:href="'https://www.baidu.com/s?wd=' + encodeURIComponent(suggestion)" target="_blank">{{ suggestion }}</a>
  </li>
</ul>

以上就是基于Vue实现多引擎搜索及关键字提示的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于vue实现多引擎搜索及关键字提示 - Python技术站