VUEはelement-uiのel-autocompleteコンポーネントを使用して入力ボックスの自動プロンプトクエリー機能を実現するのは超簡単!!!

VUEはelement-uiのel-autocompleteコンポーネントを用いて入力ボックスプロンプト機能を実現する
昨日は私が初めてvueに触れたので、ドロップダウンボックスをヒント機能付きの入力ボックスに変更するタスクを割り当てました.これにより、ユーザー体験が向上し、多くの選択肢から必要な値を選ばなくてもいいです.私はたくさんの雷を踏んで最後に実現して、みんなに役に立つことを望んでいます.
1.el-autocompleteはelementUIのコンポーネントであるため、まずelement-uiをvueプロジェクトに導入する.

npm i element-ui -S

2.element-ui、VUEでのmainを構成する.jsファイルの下に次のコードを追加します.

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3.後でelementUIを使用することができます.変更する必要があります.vueファイルの下:

4.変現jsコードは上のコードの各機能を実現する

export default {
  name: "",
  components: {
   
  },
  methods: { 
  //         methods  
  querySearchAsync(queryString, cb) {
  //                 value  ,   autocomplete   value          ，        
     let programs = this.programs;
   
     let programList = [];
    for(let i=0;i {
        cb(results);
      }, 1000 * Math.random());
    },createStateFilter(queryString) {
      return (program) => {
        return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },handleSelect(item) {
      this.event.programCode = item.value
    },
    //hangdleSelect     ，item        ，    v-modal      。

5.programsはdataで定義されています.・ajaxまたは他で取得されたもので、一般的にはドロップダウンボックスを入力ボックスに変更するので、データは存在します.私はあまり説明しません.

data () {
    var vueObj = this;
    return {
      programs: {},

これにより,自動プロンプトを入力する機能を簡単に実現できる.問題があれば、コメントエリアを追加してメッセージをくれて、できるだけ解決します.