首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Jquery 插件jquery autocomplete运用

2012-11-10 
Jquery 插件jquery autocomplete使用工作中涉及到 需要带有输入提示的功能(如google 搜索提示那样)网上找

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, 这个属性,如下效果

?
Jquery 插件jquery autocomplete运用

这里我发现这个控件一写问题:

1
比如第二个记录南京,前面会有一个空格(有兴趣的朋友可以仔细跑一下发现这个问题,后面第二 第三个 以及后续的数据都会有空格,用SPLIT 分割取得数据的时候一定要注意TRIM了)

2

下面运行提示后用鼠标点击或者回车选中响应 鼠标和回车事件(没有问题)

IE下面firefox 只能用回车选中,用鼠标选中后,数据会乱如下效果(官网的DEMO也有类似问题):


Jquery 插件jquery autocomplete运用

写好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 在运行环境和其他。。又不同的地方,需要具体问题具体分析解决之

?

热点排行