效果图
业务场景
需要根据用户输入关键词模糊匹配进行提醒进而选择查询。
后端口代码
controll层
@PreAuthorize("@ss.hasPermi('system:qymp:list')")
@GetMapping("/getNsrmc")
public AjaxResult getNsrmc() {
List<Map<String,String>> nsrmcAndValue = sysQympService.getNsrmc();
return AjaxResult.success(nsrmcAndValue);
}
xml层
这里说明一下,用Map类型接收结果,否则前端el-autocomplete不渲染
<select id="getNsrmc" resultType="java.util.Map">
select nsrmc from tbl_base_qympxx where yxbz = '0'
</select>
前端代码
<el-form-item label="企业名称" prop="nsrmc">
<el-autocomplete
value-key="nsrmc"
class="inline-input"
v-model="queryParams.nsrmc"
:fetch-suggestions="querySearch"
placeholder="请输入企业名称"
:trigger-on-focus="false"
clearable
size="small"
@keyup.enter.native="handleQuery"
style="width: 350px"
></el-autocomplete>
</el-form-item>
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)
})
},
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦