js autocomplete实现下拉模糊查询

1.js编写

// 获得焦点是重新进行查询
$("#xxx").focus(function () {
            $("#xxx").autocomplete("search");
        });
 // 检索信息（模糊匹配）
        $("#xxx").autocomplete({
            scrollHeight:180,
            scroll:true,
            delay: 500,//延迟500ms便于输入
            source: function (request, response) {
                $.ajax({
                    url: '${ctx}/xx/xxxx',
                    type: "post",
                    dataType: "json",
                    data: {"xxx": $("#xxx").val()},
                    success: function (data) {
                        var obj = $.parseJSON(data.data);
                        var dataArr = obj.data;
                        response($.map(dataArr, function (item) {
                            return {
                                result: item,
                                label: item.name,
                                value: item.code
                            }
                        }));
                    }
                });
            },
            select: function (event, ui) {
                $("#xx").val(ui.item.label);
                $("#xx").val(ui.item.value);
                $("#xxxx").val(ui.item.result.id);
                $("#xx").val(JSON.stringify(ui.item.result));
                return false;
            }
        });

2.设置下拉框(加入下面css代码即可)

.ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        html .ui-autocomplete {
            height: 300px;
        }

3.引入相应文件
引入附件内容