easyui的combobox实现模糊搜索匹配

前言

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

前台代码

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);
    }