jQuery UI Autocomplete ajax动态赋值实例

方法目的:根据用户输入的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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

最土老杨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值