页面自动补齐设计与选型（前端与后台）
序：
为提高页面的输入效率，自动补齐功能必不可以少。
那么要怎么去实现呢？
需求
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 。
扩展方法重命名，加上自己的烙印。如下：
