页面自动补齐设计与选型（前端与后台）

序：

为提高页面的输入效率，自动补齐功能必不可以少。
那么要怎么去实现呢？

需求

1：输入零件编码。根据输入的编码，智能提示。
2：用户选择提示项，带出零号名称，零件价格。
3：修改时，如零件编码匹配不到内容时，清除零件名称，价格。

已完成的效果如下图所示：
在这里插入图片描述

选型

支持补齐功能的控件很不少，选择合适的即可。其中包括：Bootstrap Typeahead, Jquery UI autocomplete 。
我的选择：是一个第三方轻量级开源的 jquery 插件。 githut地址：https://github.com/devbridge/jQuery-Autocomplete ，如下：
在这里插入图片描述

原因：
1：功能齐全，自定义性强。
2：可控，自己可以修改。
3：gitHup star 多。相信大众的眼光吧。。

设计

1：零件数据量大，并且经常变量动，考虑使用ajax数据源。
2：根据用户的使用习惯，使用左匹配，一步一步补齐。
3: 性能的需要，每次只显示10条提示，并且缓存（插件自带支持）。

资源文件引入

1：jquery，使用项目的jquery即可，试过版本 1.8 和 1.11试过都是没有问题的。
2: jQuery-Autocomplete-master/content/script/jquery.autocomplete.js
3：jQuery-Autocomplete-master/content/styles.css 文件引入。

后台实现

service:

  // 零件查询列表(分页)
    @ApiOperation(value = "零件查询", notes = "零件查询")
    @RequestMapping(path = "/getParts", method = RequestMethod.GET)
    public List<PartWarp> getParts(
            @RequestParam(name = "partCode", required = false) String partCode
        ) {
      List<PartWarp> rs=new ArrayList<>();
        List<Part> lst = biz.getPartLst(partCode);

        if(CollectionUtils.isEmpty(lst)==false)
        {
            for(Part p:lst) {
                PartWarp it = new PartWarp();
                it.setPartCode(p.getMaterial());
                it.setPartName(p.getMaterialDescription());
                it.setPrice(p.getNetPrice().doubleValue());
                rs.add(it);
            }
        }
        return rs;
    }

entiy

  public class PartWarp implements Serializable
    {
        private static final long serialVersionUID = 7588192870973201958L;

        private  String partCode;
        private  String partName;
        private  Double price;

        public String getPartCode() {
            return partCode;
        }

        public void setPartCode(String partCode) {
            this.partCode = partCode;
        }

        public String getPartName() {
            return partName;
        }

        public void setPartName(String partName) {
            this.partName = partName;
        }

        public Double getPrice() {
            return price;
        }

        public void setPrice(Double price) {
            this.price = price;
        }
    }

biz

这里使用mybatis plus实现的，关键是实例 sql 里的 like ? + '%'（例如： select * from part where part_code like '100%'）。

 @Override
    public List<Part> getPartLst(String partCode) {
        QueryWrapper<Part> wrapper = new QueryWrapper<Part>();
        if (StringUtils.isEmpty(partCode) == false) {
            wrapper.likeRight("MATERIAL", partCode);
        }
        wrapper.orderByAsc("MATERIAL");
        wrapper.last("limit 20");
        List<Part> result = mapper.selectList(wrapper);
        return result;
    }

前端

关键的地方都加了注释了。

 //初始智能补齐文本
            intSearchText: function(dom) {
                require(['jquery', 'swcas/common/js/jquery.autocomplete'], function($, flatpickrLoader) {

                    //初始智能补齐文本，原版本是 $(dom).autocomplete,但是这个扩展已经被jquery ui使用了。。刚好项目也用了。jquery ui,那就只好委屈一下它了。重命名为autocompleteRichy。
                    $(dom).autocompleteRichy({
                        serviceUrl: $context.$config.localDomain + '/part/getParts',
                        paramName: 'partCode',   //传到后台参数的名称
                        dataType: 'json',  //返回结果的格式
                        transformResult: function(response) {
                         //根据后台返回的结果，转换成插件使用的格式。
                            return {
                                suggestions: $.map(response, function(dataItem) {
                                    return { value: dataItem.partCode, data: dataItem.partName, price: dataItem.price };
                                })
                            };
                        },
						//输入全匹配 或者 手动选择提示项 事件，可以在这里做匹配完成的动作。 
                        onSelect: function(suggestion) {
                            // $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
                            dom.val(suggestion.value);
                            var partName = dom.parent().parent().parent().find('[name="partName"]');
                            partName.val(suggestion.data);
                            partName.attr("title", suggestion.data);
                            var price = dom.parent().parent().parent().find('[name="price"]');
                            price.val(suggestion.price);
                            price.attr("title", suggestion.price);


                        },
                        onHint: function(hint) {
                            //  $('#autocomplete-ajax-x').val(hint);

                        },
					
						//未匹配时触发，作用：在当输入内容变动时清除关联内容
                        onInvalidateSelection: function() {
                            //  $('#selction-ajax').html('You selected: none');
                            var partName = dom.parent().parent().parent().find('[name="partName"]');
                            partName.val("");
                            partName.attr("title", "");
                            var price = dom.parent().parent().parent().find('[name="price"]');
                            price.val("");
                            price.attr("title", "");

                        }
                    });
                });
            },

插件修改

框架有使用jquery UI的同学注意了，因为 autocomplete 扩展方法已经存在了。可以重命名或者直接使用devbridgeAutocomplete 。
扩展方法重命名，加上自己的烙印。如下：

在这里插入图片描述