【vue學習】vue 組件 實例 自動提示的搜索框

基於element-ui

輸入內容，會自動從服務器獲取建議，然后顯示

 

 

 

 

主要有兩個個方法

querySearchAsync，傳入查詢參數和一個回調函數，根據查詢參數，返回一個數組，value表示提示列表顯示的信息，還可以放入對象

handleSelect，當提示條目被選中時 觸發，會傳入，提示的對象數組，可以取出之前放入的對象，傳遞對象而不是對象id，可以減少查詢次數

<template>
  <div class="wrapper">
    <el-autocomplete size="small"
                     v-model="msg"
                     :fetch-suggestions="querySearchAsync"
                     placeholder="請輸入內容..."
                     @select="handleSelect">
      <i slot="suffix" class="el-input__icon el-icon-close" @click="msg=''"></i>
    </el-autocomplete>
  </div>
</template>
 
<script>
  import Vue from 'vue'
  import {Button, Select, Input, Autocomplete} from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import {get_hot, search_movie} from "../api/movie_api";
 
  Vue.component(Button.name, Button)
  Vue.component(Select.name, Select)
  Vue.component(Input.name, Input)
  Vue.component(Autocomplete.name, Autocomplete)
 
  export default {
    name: "search",
    data() {
      return {
        movie_list: [],
        msg: '',
      };
    },
    components: {},
    methods: {
      clear() {
        console.log('clear')
      },
      async loadAll() {
        let list = await get_hot()
        // console.log('hot list', list)
        return list
      },
      async querySearchAsync(queryString, cb) {
 
        if (this.msg.length == 0) {
          this.movie_list = await get_hot()
        } else {
          this.movie_list = await search_movie(this.msg)
        }
        let results = []
        for (let i of  this.movie_list) {
          // console.log(i)
          results.push({
            value: i['alt_title'],
            movie_id: i['id'],
          })
        }
        cb(results)
      },
 
      handleSelect(item) {
        // console.log('點擊的電影是', item['movie_id']);
        this.$emit('change_movie_id', item['movie_id'])
      }
    },
    mounted() {
      this.movie_list = this.loadAll();
    }
  }
</script>
 
<style scoped>
 
  .wrapper {
    display: flex;
    justify-content: center;
    /*margin: 5px;*/
  }
 
</style>