How to use Vue to implement Baidu-like search effects

How to use Vue to implement Baidu-like search effects requires specific code examples

Baidu search engine has always been one of the most used search engines by domestic users, and it The unique search effect also brings a good experience to users. Among them, the drop-down box effect that imitates Baidu search is also very popular. This article will introduce how to use Vue to implement Baidu-like search effects and provide specific code examples.

First, we need to create a Vue project. In the project's entry file (main.js), introduce Vue and related components:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Next, we need to create a component named App.vue in the project to implement the search box and drop-down box function. In App.vue, we first define a data attribute searchText, which is used to bind the value of the search input box:

<template>
  <div>
    <input type="text" v-model="searchText" @input="search">
    <ul v-show="showList">
      <li v-for="item in searchList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchList: [],
      showList: false
    }
  },
  methods: {
    search() {
      if (this.searchText === '') {
        this.showList = false;
        return;
      }
      this.showList = true;
      // 调用百度搜索API获取搜索结果
      this.searchList = this.getBaiduSearchResult();
    },
    getBaiduSearchResult() {
      // 使用axios发送HTTP请求获取搜索结果
      // 注意：这里只是模拟，实际使用时应该替换为真实接口
      return axios.get('https://www.baidu.com/sugrec')
        .then(response => response.data.g);
    }
  }
}
</script>

In the above code, we use the v-model instruction to bind the value of the search input box to searchText The properties are two-way bound, so that the value of searchText is automatically updated every time you enter. At the same time, we call the search method in the input event of the input box. The function of this method is to obtain the search results and display the drop-down box.

In the search method, first determine whether the value of the search box is empty. If it is empty, hide the drop-down box and return; otherwise, display the drop-down box and call the getBaiduSearchResult method to obtain the search results. The axios library is used here to send HTTP requests and simulate the association function of Baidu search through GET requests.

Finally, we need to introduce the axios library into App.vue in order to send HTTP requests:

npm install axios --save

After completing the above steps, we need to use the App component in the template of the root component to display The entire page structure. Modify the template of the root component as follows:

<template>
  <div id="app">
    <h1>仿百度搜索特效</h1>
    <App/>
  </div>
</template>

In the above code, we put the App component into the root component for display, so that the structure of the entire page is completed.

Finally, we need to introduce CDN links for Vue and related libraries into the project. You can add the following code to the public/index.html file:

<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>

At this point, we have completed the Vue implementation of Baidu search imitation. You can run the project and enter keywords in the search box to achieve a Baidu search-like drop-down box effect.

In actual use, you can also use CSS to beautify the style of the search box and further optimize the logic and performance of the code. I hope this article can help you understand how to use Vue to implement Baidu-like search effects!

The above is the detailed content of How to use Vue to implement Baidu-like search effects. For more information, please follow other related articles on the PHP Chinese website!