easyUi combobox如何实现下拉模糊查询功能，前后端实现动态加载数据

网上很多分享静态数据的下拉模糊查询，我在这儿再补充下动态数据的场景。

模糊下拉单选查询功能UI:

1.前端代码：

1.1 html语句：

<div id="div1" name="div1" class="easyui-dialog" style="width:800px;height:220px;padding:10px 10px"
     closed="true" modal=true>
    <tr>
        <td><span>选择:</span></td>
        <td>
            <input id="queryUser" name="queryUser" type="text" style="width:125px;padding-left: 10px;"/>
        </td>
    </tr>
</div>

1.2 combobox

js语句:

<script type="text/javascript">
 $(function () {
        //此处queryUser是我的input标签的id
        BindBuildingDictItem('queryUser');
    });

    function BindBuildingDictItem(comboid) {
        $.ajax({
            type: 'post',
            url: sys.rootPath + "/sf/manager/queryAll",//这是访问后端的接口，其中sys.rootPath的值为：${request.contextPath}${contextPath}
            dataType: 'json',
            success: function (data) {

                $('#' + comboid).combobox({
                    valueField: 'uid',//真正要存储到后台的内容
                    textField: 'userName', //选择框显示的内容
                    panelHeight: 'auto',
                    required: true, //必须输入
                    editable: true,//可编辑
                    data: data.rows
                });
                $('#' + comboid).combobox('select', "");
            }
        });
    }

</script>

2.后端springboot 返回的数据：

controller 代码：

@Controller
@RequestMapping("/sf/manager")
public class ManagerController {

    @ResponseBody
    @RequestMapping(value = "/queryAll")
    public R queryAll() {
  
            List<userVo> list = userService.queryAll();
            int total = fofUserInfoService.count();
            return R.ok(list);
    }
}

R的代码：

@Data
public class R {

    /**
     * 信息代码
     */
    private String code;
    /**
     * 信息说明
     */
    private String message;
    /**
     * 返回数据或jqgrid中的root
     */
    private Object rows;

    public R(String code, String message, Object rows) {
        this.code = code;
        this.message = message;
        this.rows = rows;
    }

    public static R ok(Object rows) {
        return new R("0000", "success", rows);
    }
}

返回结果：

{
    "code": "0000", 
    "message": "success", 
    "rows": [
        {
            "uid": 9, 
            "userName": "test0001", 
            "password": null, 
        },
        {
            "uid": 9, 
            "userName": "test001", 
            "password": null, 
        },
        {
            "uid": 9, 
            "userName": "xxctest1", 
            "password": null, 
        }
    ]
}