效果图

业务场景

需要根据用户输入关键词模糊匹配进行提醒进而选择查询。

后端口代码

controll层

@PreAuthorize("@ss.hasPermi('system:qymp:list')")
@GetMapping("/getNsrmc")
public AjaxResult getNsrmc() {
    List> nsrmcAndValue = sysQympService.getNsrmc();
    return AjaxResult.success(nsrmcAndValue);
}

xml层

这里说明一下，用Map类型接收结果，否则前端el-autocomplete不渲染

    select nsrmc from tbl_base_qympxx where yxbz = '0'

前端代码

querySearch(queryString, cb) {
      getNsrmc().then(response => {
        this.restaurants = response.data
        // console.log("before："+this.restaurants)
        // let results = queryString ? this.restaurants.filter(nsrmc=>nsrmc.indexOf(queryString)>-1) : this.restaurants
        // 全字段匹配
        let results = this.restaurants.filter(nsrmcs => nsrmcs.nsrmc.indexOf(queryString) > -1)
        // 从头开始匹配
        // let results = this.restaurants.filter(nsrmcs => nsrmcs.nsrmc.indexOf(queryString) === -1)
        // console.log("after："+results)
        // 调用 callback 返回建议列表的数据
        cb(results)
      })
    },

参考链接

本文由博客一文多发平台 OpenWrite 发布！