elment实现联想输入功能el-autocomplete

女爷i 2023-06-24 06:27 1阅读 0赞

为了实现下面这种联想效果，非option的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]

## 一、页面： ##

<el-row>
                <el-col :span="11">
                  <el-form-item label="计量单位" prop="jldw" :rules="[ { required: true, message: '请输入计量单位', trigger: 'blur' }]" >
                    <el-autocomplete style="width: 100%" :disabled="show" :fetch-suggestions="jldwListQuerySearch" @select="handleSelect" size="small" v-model="dataFrom.jldw" placeholder="请输入计量单位" >
                      <template slot-scope="{ item }" @click="handleIconClick">
                        <div class="name">{ {  item.label }}</div>
                      </template>
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
              </el-row>

## 二、代码： ##

//联想的选项内容
    getSysLxsjData(){ 
                  getSysLxsj().then(res=>{ 
                    this.jldwList = res.data.data
                  })
                },
    jldwListQuerySearch(queryString, cb) { 
              var restaurants = this.jldwList;
              var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
              // 调用 callback 返回建议列表的数据
              cb(results);
            },
    createFilter(queryString) { 
              return (restaurant) => { 
                return (restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
              };
            },
    //选中选项时对输入框赋值，否则会显示数字，非文字
     handleSelect(item){ 
              console.log(item,'item')
              this.dataFrom.jldw = item.label;
            },
    handleIconClick(){  },

this.jldwList 是后台请求过来的数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221112503806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191221112742707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70