jQuery UI Autocomplete ajax动态赋值实例

最新推荐文章于 2022-07-12 17:36:22 发布

最土老杨

最新推荐文章于 2022-07-12 17:36:22 发布

阅读量3.1k

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/jizhunboss/article/details/53691936

版权

java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

方法目的：根据用户输入的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")
	@ResponseBody
	public 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/