jQuery 扩展 类似Google搜索功能提示

/**
 * @author: 一只拖鞋 (Email: [e-mail])
 * 
 * 基于jQuery的类似Google搜索的提示列表
 * 调用方式：$(input).tips(options);
 * options: 参数选项
 *		url  JOSN 获取URL地址
 *		param  获取JOSN数据时提交的参数名			
 *		leftText  提示列表左边显示文字的JSON字段
 *		rightText  提示列表右边显示文字的JSON字段
 *		inputText  点击提示列表后显示在输入框内容的JSON字段
 *		rightTextLength: 50, // 右边数字最长的长度
 *		leftTextLength:50, // 左边数字最长的长度
 *		
 *		hiddenId  隐藏域id 可选
 *		hiddenText  隐藏域值 可选
 *		width  提示列表宽度，可选(超宽时自动加宽, 默认为300)
 *		selectClass 选中样式
 *
 * 要求返回的JSON数据格式为：
 *		[{key:value,key:value...},{key:value,key:value...},...]
 *
 * 支持：IE, Firefox
 * @version: 1.0
 *		初始版本
 *
 * @version: 2.0
 *		修复问题：1、禁止浏览器自动完成功能
 *				  2、修复与其它JS兼容问题
 *				  3、鼠标经过时显示手状图
 * @version: 2.1
 *		修复问题：按回车无效，已修改
 *		添加功能：左边及右边字数显示的限制,默认为20个字/字符
 */

调用示例：
<input type="text" height="20px" id="myinput1" name="myinput1" value=""/>

$("#myinput1").tips({
			url: "json.html", // JOSN 获取URL地址
			param: "myinput1", // 获取JOSN数据时提交的参数名			
			leftText: "text",// 提示列表左边显示文字的JSON字段
			rightText: "text2", // 提示列表右边显示文字的JSON字段
			inputText: "text", // 点击提示列表后显示在输入框内容的JSON字段

			hiddenId: "hid", // 隐藏域id 可选
			hiddenText: "id", // 隐藏域值 可选
			width: 100 // 提示列表宽度，可选
		});

解决：jQuery 与其它 js 封装的冲突问题。
      被表单自动完成提示遮照的问题。

评论

19 楼 joknm 2010-12-14  

superxgz 写道

有个小BUG，用上向方向键移动选择，按下回车键后，hiddenId控件并不能被赋值，
但用鼠标点就可以赋值

+1

已修改！

最近比较忙，最近才看到，不好意思。

18 楼 superxgz 2010-11-26  

有个小BUG，用上向方向键移动选择，按下回车键后，hiddenId控件并不能被赋值，
但用鼠标点就可以赋值

17 楼 l_luqian 2010-11-26  

哈哈，昨天我同事就做个了跟你类似的效果！但是我问他，他不告诉我怎么做！今天被我找到啦，谢谢了@！

16 楼 feikongting 2010-10-20  

项目当中刚要用到这个东西，拿过来研究一下啦，谢谢了哦，不过貌似网上都有现成的实现方法了

15 楼 ricoyu 2010-10-13  

现在完美了,以后会在我的项目中用到

14 楼 joknm 2010-10-12  

ricoyu 写道

确实蛮不错的, 不过跟Google suggest还是有些不一样的, 后者鼠标移到列表还是呈箭头状, 不知是否先入为主的缘故, 感觉这样舒服点, lz可以考虑修改一下

+1

已修改。

13 楼 maozi1986 2010-10-12  

正好有用，谢谢

12 楼 Neptune_9999 2010-10-12  

非常谢~谢楼主分享~

11 楼 ricoyu 2010-10-11  

确实蛮不错的, 不过跟Google suggest还是有些不一样的, 后者鼠标移到列表还是呈箭头状, 不知是否先入为主的缘故, 感觉这样舒服点, lz可以考虑修改一下

10 楼 cy0531 2010-10-11  

不错的想法

9 楼 skyfen 2010-10-11  

很不错，【顶】【一】【下】。

8 楼 joknm 2010-10-10  

rockethj8 写道

jquery-1.4.2.min.js这个文件都没有…

已重新上传。

7 楼 albb0608 2010-10-10  

太好了，正需要呀

6 楼 rockethj8 2010-10-09  

jquery-1.4.2.min.js这个文件都没有…

5 楼 shiyj001 2010-10-09  

真的非常好！

4 楼 satanultra 2010-10-09  

的的的的的的

3 楼 crazier9527 2010-10-09  

不错，正好用到，多谢

2 楼 kimono 2010-10-08  

<p>很不错哈，如果加上分页功能就更不错了。</p>

1 楼 jallin 2010-10-03  

不错啊！学习了！