2021-08-26

el-autocomplete远程搜索组件

需求：填写文本框时，能够实时显示数据库中的对应信息，方便用户查找信息
方法：利用el-autocomplete远程搜索组件
效果如下：

点击输入框能够显示数据库表中的所有用户姓名，输入用户部分信息，能够匹配下拉框中能够出现对应搜索建议。
vue代码如下：

 <el-autocomplete size="mini" v-model="name"
                     :fetch-suggestions="getnameoptions"
                     @select="handleSelect"
                     :trigger-on-focus="true"
                     placeholder="请输入姓名"
    >
    </el-autocomplete>

fetch-suggestions是获取搜索建议的方法，select是选中后触发的事件，trigger-on-focus是聚焦时是否触发，true时，聚焦即可显示搜索建议内容，false时，需要输入内容，才能显示搜索建议内容。

	handleSelect () {
      console.log(this.name)
    },
    getnameoptions (queryString, cb) {
      // cb是回调函数
      var results = []
      this.$http({ // 从后端获取数据
        url: this.$http.adornUrl('你的url'),
        method: 'get',
        params: this.$http.adornParams({
          'name': this.name // 输入框内容
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          for (var i = 0; i < data.info.length; i++){ 
          // 将后端返回的数据push到results中，autocomlete只识别value字段并在下拉框中显示
            results.push({value: data.info[i].name,id: data.info[i].id})
          }
          cb(results)
        } else {
          results = []
          cb(results)
        }
      })
    }

数据库查询代码：
这里采用了模糊查询，当name的开始字段与前端传递来的name匹配时，返回所有匹配的姓名和id

   <select id="queryNameAndId" resultType="java.util.LinkedHashMap">
        select id,name from user where name like #{name}"%"
    </select>