jQuery UI Autocomplete ajax动态赋值实例

来源：互联网发布：语音读短信软件编辑：程序博客网时间：2024/06/16 08:00

方法目的：根据用户输入的sku，自动模糊匹配系统中的sku

<script>$(function() {//autocomplete var dataArray=[]; $("#sku").autocomplete({max: 12,    //列表里的条目数              minChars: 0,    //自动完成激活之前填入的最小字符              width: 400,     //提示的宽度，溢出隐藏              scrollHeight: 300,   //提示的高度，溢出显示滚动条              matchContains: false,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示              autoFill: true,    //自动填充              minLength: 1,source: function(request,process){$.ajax({type : "GET",contentType : "application/json;charset=utf-8",url : Chelper.path + '/pub/getSkuALl.shtml',dataType : "json",data:{                        searchItem: request.term                    },async : false,success : function(result) {if(result.code == 0000){return process(result.result);}}});},focus: function( event, ui ) {                return false;            },            select: function( event, ui ) {                $( "#sku" ).val( ui.item.sku );                return false;            }}).data("ui-autocomplete")._renderItem = function( ul, item ) {            return $( "<li></li>" )                    .data( "item.autocomplete", item )                    .append( "<a class='clearfix'><div><b>"+item.sku+"</b></div><div>"+item.description+"</div></a>")                    .appendTo( ul );        }        $("#sku").data("ui-autocomplete")._resizeMenu = function() {            var w = $( "#sku").parent().outerWidth();            this.menu.element.addClass('dropdown-menu dropdown-navbar').css({'width':w});        }

后台实现

/** * sku控件查询，获取所有的sku+描述 * @throws Exception  */@RequestMapping("/pub/getSkuALl")@ResponseBodypublic ManagerResponseMessage<Object> getSkuALl(ModelMap map,String searchItem) throws Exception{CacheContext<List<SkuQuery>> cacheContext = AppContext.getBean("cacheContext");logger.info("searchItem:"+searchItem);ManagerResponseMessage<Object> mess = new ManagerResponseMessage<Object>();Pattern pattern = Pattern.compile(searchItem,Pattern.CASE_INSENSITIVE);//查找字符串中包含saurus的字符,利用了匿名方法(第一种方式）  List<SkuQuery> list = cacheContext.get("skuList");List<SkuQuery> listFind = new ArrayList<SkuQuery>();        for(SkuQuery item: list){        Matcher matcher = pattern.matcher(item.getSku());            if(matcher.find()){            listFind.add(item);            }        }        mess.setResult(listFind);return mess;}

其中碰到的问题：

1、基础参考 http://blog.csdn.net/paincupid/article/details/50551771

2、自定义样式： http://www.cnblogs.com/ysxq/p/5941538.html http://www.th7.cn/web/html-css/201504/95705.shtml

3、jQuery UI Autocomplete不论输什么都显示同一结果

原因是从后台取的数据，所以后台传过来什么它就显示什么，不再进行筛选。
所以应该在后台就筛选好了之后再传递过来。

4、加缓存：https://my.oschina.net/zimingforever/blog/63877/

0 0