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
- jQuery UI Autocomplete ajax动态赋值实例
- jQuery UI Autocomplete ajax动态赋值实例
- jquery ui autocomplete ajax动态访问
- jquery ui autocomplete实例
- jQuery UI 实例 - 自动完成(Autocomplete)
- jQuery UI 实例 - 自动完成(Autocomplete)
- jquery autocomplete ajax动态获取数据
- YII框架中使用jQuery UI : 自动完成(Autocomplete)--本地数据和使用ajax获取远程数据实例
- JQUERY UI autocomplete
- jquery ui autocomplete
- 使用 jQuery UI AutoComplete
- jQuery UI AutoComplete
- jQuery UI Autocomplete 体验
- jQuery UI Autocomplete 体验
- JQuery UI Autocomplete
- jQuery UI Autocomplete
- jQuery-autoComplete实例
- ajax里jquery给th动态赋值
- linux shell--变量赋值
- Spring JDBC 常用批量操作及插入操作
- react 小记
- 纯CSS3实现多啦a梦—感觉萌萌哒
- 浅谈Servlet的Web服务器
- jQuery UI Autocomplete ajax动态赋值实例
- Java对象的序列化和反序列化
- 曾经映射到AIX主机的存储LUN在存储断开(光纤线拔掉)的情况下的ls -rlt /dev/和lspv的结果差异
- HDU 2516 取石子游戏 斐波那契博弈裸题
- 获取iPhone手机的型号 iOS
- Android 文件及文件夹删除
- 二维数组中的查找
- EditText 多行显示及所有属性
- 可以用来膜拜:一个草根程序员如何进入BAT