文本框获取焦点的时候发送请求,拿回来数据,想搜索数据中的某个值,直接搜索功能,效果图如下:

代码如下:

注意一点:el-autocomplete中数组值的结构必须是{value:'值'}

 

<el-autocomplete
              v-model="formInline.group"
              size="mini" 
              :fetch-suggestions="querySearchGroup"
              @select="selectGroup"
              @focus="groupListMe"
              placeholder="请输入内容"
            ></el-autocomplete>

js:
watch:{
    'formInline.group': {
        deep: true,
        handler: function (newVal,oldVal){
          this.groupArr = [];//这是定义好的用于存放下拉提醒框中数据的数组
          var len = this.groupList.length;//groupList
          var arr = [];
          for (var i = 0; i < len; i++) {//根据输入框中的值进行模糊匹配
            if (this.groupList[i].name.indexOf(this.formInline.group) >= 0) {
              arr.push({
                value:this.groupList[i].name,
                id:this.groupList[i].id
              })
            }
          }
          this.groupArr = arr
        }
    },
  },
methods:{
    groupListMe() {
      this.$http.post(url, {
        name:this.formInline.group
      }).then(res => {
          if (res.data.success) {
            this.groupList = []
            this.groupArr = []
            this.groupList = res.data.data.result
            for(let item of this.groupList) {
              this.groupArr.push({
                value:item.name,
                id:item.id
              })
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    querySearchGroup(queryString, cb) {
      var groupArr = this.groupArr;
      cb(groupArr);
    },
    selectGroup(val) {
      this.groupId = val.id
    },
}

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐