Jquery 插件jquery autocomplete使用
工作中涉及到 需要带有输入提示的功能(如google 搜索提示那样)网上找了一些资料,最好选定jquery autocomplete 来实现,下面介绍一下使用已经,项目中遇到的一写问题
index.jsp
???? 这里主要是用到了jquery.autocomplete.js 里面的$("#suggest3").autocomplete 方法(这方面的资料比较多,具体可以网上搜索,我也是参考官方例子改写的官方网的DEMO 地址:http://jquery.bassistance.de/autocomplete/demo/
主要从后台返回的结果是以JSON 的数据格式返回的
autoComplete.jsp
?
?后台JAVA 代码
?? City
?
?我这里项目中需要多列 所以用了multiple: true, 这个属性,如下效果?
这里我发现这个控件一写问题:
1
比如第二个记录南京,前面会有一个空格(有兴趣的朋友可以仔细跑一下发现这个问题,后面第二 第三个 以及后续的数据都会有空格,用SPLIT 分割取得数据的时候一定要注意TRIM了)2
下面运行提示后用鼠标点击或者回车选中响应 鼠标和回车事件(没有问题)
IE下面firefox 只能用回车选中,用鼠标选中后,数据会乱如下效果(官网的DEMO也有类似问题):
写好DEMO 觉的挺容易的马上移植项目中,结果又遇到不少的问题
1 系统中用了prototype.js? 在加入jquery.js 页面效果出不来,后来找到问题了prototype.js? 和jquery.js冲突
?? 官网下载的jquery.js 是1.2.6版本的,网上有说法改写jquery 的$结果没搞定,后来升级jquery.js 1.4.2 问题解决
2我们系统中用了sitemesh 做装饰,页面头尾都不需要关心的,autoComplete.jsp 返回的结果不是JSON 后又给装饰后加了头尾HTML 数据流了,这样autoComplete控件就无效了
一定要确定在服务端返回的数据流最终是JSON 格式数据
?
?
总结:项目中往往和简单的DEMO 在运行环境和其他。。又不同的地方,需要具体问题具体分析解决之
?