easyui的combobox实现模糊搜索匹配

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/summeranhx/article/details/81560720

前言

该模糊匹配效果类似于百度搜索的提示框

这里写图片描述

前台代码

easyui中combobox的mode参数如下:
这里写图片描述

<input class="easyui-combobox" name="name" style="width:90%"
                   data-options="
                    label:'品种名称:',
                   required:true,
                   labelAlign:'right',
                   labelWidth:'150',
                   valueField: 'id',
                   textField: 'name',
                   editable:true,
                   mode:'remote',
                   url:baseurl + 'varityData/comList'
                "
 />

关键代码说明

editable:true, //让combobox框可以编辑,用于用户输入数据
mode:'remote', //从服务器接收数据,用户输入的数据以名为q的参数传至后台
url:baseurl + 'varityData/comList' //后台具体的请求地址

后台代码

    @ResponseBody
    @RequestMapping("/comList")
    public List<?> comList(String q){
        VarityData varityData = new VarityData();
        varityData.setName(q);
        return varityDataService.comList(varityData);
    }

没有更多推荐了,返回首页