搜索suggest实现 动态的查询建议

解决的问题：

1. 因为select下拉选项太多需要做搜索建议
2. 提高页面加载速度
3. 实现一次之后 后续的接入只需修改js和枚举

主要思路：

1. 使用动态sql 拼装需要的参数
2. 使用枚举来动态的加载表
3. 在页面中传入需要的枚举值 和 需要like的字段

引入插件magicsuggest

<script src="${pageContext.request.contextPath}/static/plugin/magicsuggest/magicsuggest-min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugin/magicsuggest/magicsuggest-min.css" />
复制代码

在页面中加上相应的区域 可以为input或者div

<div id="mssupplier"></div>
复制代码

在js中对上面的id进行绑定magicsuggest事件

$(function() {
   var mssupplier = $('#mssupplier').magicSuggest({
        allowFreeEntries: false,
        autoSelect: true,
        placeholder:'请选择供应商',
        data: '****.html',  //数据请求地址
        dataUrlParams: {    //请求带的参数
            category: 2,    //对应的下面的枚举值
            columns: ['name', 'supplierNo'] //请求的数据库字段（需要like的）
        },
        maxSelection: 1,
        cls: 'col-xs-2',
        infoMsgCls: 'hide'
    });
 
    $(mssupplier).on('selectionchange', function(e,m){
        reloadGrid(); //改变之后需要所做的事情
    });
}
复制代码

设置枚举类对应请求参数

/**
 * @author lemon
 * @date 2017-12-20 18:24
 * @desc 搜索建议插件枚举
 */
public enum SuggestCategoryEnum {
    SHOP(1, "table1", true),
    SUPPLIER(2, "table2", true),
    USER(3, "table3", false),
    PRODUCT(4, "table4", true);
 
    private final int category; //分类
    private final String tableName; //表名
    private final boolean isMall;   //其他参数（这个为作者的业务需求）
 
    SuggestCategoryEnum(int category, String tableName, boolean isMall) {
        this.category = category;
        this.tableName = tableName;
        this.isMall = isMall;
    }
 
    public int getCategory() {
        return category;
    }
 
    public String getTableName() {
        return tableName;
    }
 
    public boolean isMall() {
        return isMall;
    }
 
    public static SuggestCategoryEnum getEnum(int category) {
        for (SuggestCategoryEnum anEnum : values()) {
            if (anEnum.getCategory() == category) {
                return anEnum;
            }
        }
        throw new RuntimeException("not find category:" + category);
    }
}
复制代码

请求后台sql mybatis

<select id="listSuggest" resultType="cc.laowantong.entity.suggest.Suggest" parameterType="cc.laowantong.entity.suggest.SuggestParam">
    select id,
    concat
    <foreach item="column" index="index" collection="matchColumns"
             open="(" separator="," close=")">
        ${column}
    </foreach> as name
    from ${tableName}
    <trim prefix="WHERE" prefixOverrides="AND|OR">
        <foreach item="column" index="index" collection="matchColumns"
                 open="" separator="or" close="">
            ${column} like "%"#{keywords}"%"
        </foreach>
    </trim>
    limit #{limit}
</select>
复制代码

参考资料：http://nicolasbize.com/magicsuggest/doc.html

未经作者lemon允许 请勿转载，谢谢 :)

转载于:https://juejin.im/post/5a3bb666518825455f2f7679