Vue中實現輸入框的自動補全功能

周文豪發表於2024-04-09
Vue

一、百度文心一言的結果

在Vue中實現輸入框的自動補全功能，可以使用原生的input事件監聽使用者的輸入，並透過計算屬性或方法來提供匹配的自動補全建議。以下是一個簡單的例子：

<template>
  <div>
    <input type="text" v-model="userInput" @input="updateSuggestions">
    <ul v-if="suggestions.length">
      <li v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)">{{ suggestion }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '',
      suggestions: [],
      // 這裡是一個示例的自動補全資料來源
      dataSource: ['apple', 'banana', 'cherry', 'date', 'fig', 'grape']
    };
  },
  methods: {
    updateSuggestions() {
      // 使用filter方法根據使用者輸入過濾資料來源
      this.suggestions = this.dataSource.filter(item => item.startsWith(this.userInput));
    },
    selectSuggestion(suggestion) {
      this.userInput = suggestion;
      this.suggestions = []; // 選擇之後清空建議列表
    }
  }
};
</script>

<style>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  padding: 5px;
  background: #f0f0f0;
  border-bottom: 1px solid #eee;
}

li:hover {
  background: #e9e9e9;
}
</style>

在這個例子中，我們有一個輸入框和一個下拉選單用於顯示自動補全的建議。當使用者輸入時，updateSuggestions 方法會被觸發，計算匹配使用者輸入的補全建議，並更新suggestions陣列。當使用者點選列表中的項時，selectSuggestion 方法會被觸發，使用者的輸入會被設定為所選擇的補全建議，並清空建議列表。

二、專案實戰

輸入框和下拉框

<el-row type="flex" class="row-bg">
          <el-col :span="12">
            <el-form-item label="地區" prop="area">
              <el-input v-model="ruleForm.area" placeholder="請輸入地區" class="input1" style="width: 240px;" @input="autoComplete"></el-input>
            </el-form-item>
          </el-col>
</el-row>
<div class="input_complete" :style="inputCompleteStyle" v-if="inputComplete">
   <div v-for="item in filterInputCompleteList" :key="item.id" class="complete_data" @click="selectInputComlete(item)">{{item.chiShortName}}</div>
</div>

資料模型

filterInputCompleteList:[],
inputComplete:false,
inputCompleteStyle:{"width":"200px","border":"1px solid #ccc","background":"#FFFFFF"},

@input在輸入框內容發生變化後觸發

autoComplete(val){
        if(val.length == 0){
          this.inputComplete = false;
          this.filterInputCompleteList = [];
        }else{
          const data = {
            page:1,
            limit:10,
            chiShortName:val
          }
          area.getCountyList(data).then(response => {
            this.filterInputCompleteList = response.data
            if(this.filterInputCompleteList.length == 0){
              this.$message.error('未匹配到相關資料');
            }else{
              this.inputComplete = true;
              this.inputCompleteStyle = {"width":"240px","border":"1px solid #ccc","background":"#FFFFFF","margin-top":"-20px","margin-left":"120px","z-index":"999","position":"absolute"};
            }
          })
        }
      },

當使用者點選列表中的項時，selectInputComplete 方法會被觸發

//自動補全選擇
      selectInputComlete(item){
        this.ruleForm.area = item.chiShortName;
        this.inputComplete = false;
        this.filterInputCompleteList = []; // 選擇之後清空建議列表
      },

樣式：

<style scoped>
  .complete_data{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding-left: 15px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
  }
</style>

效果：

相關文章