远程搜索

在输入框输入内容时会在下拉框中显示相关内容，使用element-ui的<el-autocomplete>组件。
前端vue代码如下：

<el-form-item label="物料编码">
        <el-autocomplete
          v-model="searchSupplyNumber"
          :fetch-suggestions="getListNumber"
          placeholder
          @select="handleSelect"
          suffix-icon="el-icon-search"
        ></el-autocomplete>
 </el-form-item>

注意：autocomplete只识别value字段，从后台获取的数组中每一个对象必须要有一个value字段
js代码：

getListNumber(queryString, cb) {
     this.$http({
       method: "post",
       url: "/api/findByNumber",
        params: {
          supplyNumber: queryString,
        }
     })
     .then(response =>{
       for(var i=0; i<response.data.length; i++) {
          response.data[i].value = response.data[i].supplyNumber;
       }
       cb(response.data);
     })
    },

后端springboot代码：
mapper.xml中：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.demo.supply.mapper.SupplyMapper">
   <select id="findByNumber" resultType="com.demo.supply.entity.Supply">
        select distinct supply_number from supply where 1 = 1
        <if test="params.supplyNumber !=null and params.supplyNumber.trim() != ''">
            and supply_number like concat(concat('%',#{params.supplyNumber}),'%')
        </if>
    </select>
</MAPPER>

controller.java中：

@RestController
public class SupplyController {
    @RequestMapping("findByNumber")
    public List<Supply> findByNumber(@RequestParam Map<String, Object> params) {
        return supplyService.findByNumber(params);
    }
}

service.java中：

public interface SupplyService extends IService<Supply> {
    List<Supply> findByNumber(Map<String, Object> params);
}

serviceImpl.java中：

 @Service("SupplyService")
    public class SupplyServiceImpl extends ServiceImpl<SupplyMapper, Supply> implements SupplyService {
     @Override
      public List<Supply> findByNumber(Map<String, Object> params) {
        return baseMapper.findByNumber(params);
      }
   }

mapper.java中：

@Mapper
public interface SupplyMapper extends BaseMapper<Supply> {
    List<Supply> findByNumber(@Param("params") Map<String, Object> params);
}