当前位置: 代码迷 >> Web前端 >> jQuery 扩张 类似Google搜索功能提示
  详细解决方案

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

热度:382   发布时间:2012-10-27 10:42:26.0
jQuery 扩展 类似Google搜索功能提示
/**
 * @author: 一只拖鞋 (Email: joknm12@163.com)
 * 
 * 基于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 封装的冲突问题。
      被表单自动完成提示遮照的问题。
1 楼 jallin 2010-10-03  
不错啊!学习了!
2 楼 kimono 2010-10-08  
<p>很不错哈,如果加上分页功能就更不错了。</p>
3 楼 crazier9527 2010-10-09  
不错,正好用到,多谢
4 楼 satanultra 2010-10-09  
的的的的的的
5 楼 shiyj001 2010-10-09  
真的非常好!
6 楼 rockethj8 2010-10-09  
jquery-1.4.2.min.js这个文件都没有…
7 楼 albb0608 2010-10-10  
太好了,正需要呀
8 楼 joknm 2010-10-10  
rockethj8 写道
jquery-1.4.2.min.js这个文件都没有…


已重新上传。
9 楼 skyfen 2010-10-11  
很不错,【顶】【一】【下】。
10 楼 cy0531 2010-10-11  
不错的想法
11 楼 ricoyu 2010-10-11  
确实蛮不错的, 不过跟Google suggest还是有些不一样的, 后者鼠标移到列表还是呈箭头状, 不知是否先入为主的缘故, 感觉这样舒服点, lz可以考虑修改一下
12 楼 Neptune_9999 2010-10-12  
非常谢~谢楼主分享~
13 楼 maozi1986 2010-10-12  
正好有用,谢谢
14 楼 joknm 2010-10-12  
ricoyu 写道
确实蛮不错的, 不过跟Google suggest还是有些不一样的, 后者鼠标移到列表还是呈箭头状, 不知是否先入为主的缘故, 感觉这样舒服点, lz可以考虑修改一下

+1

已修改。
15 楼 ricoyu 2010-10-13  
现在完美了,以后会在我的项目中用到
16 楼 feikongting 2010-10-20  
项目当中刚要用到这个东西,拿过来研究一下啦,谢谢了哦,不过貌似网上都有现成的实现方法了
17 楼 l_luqian 2010-11-26  
哈哈,昨天我同事就做个了跟你类似的效果!但是我问他,他不告诉我怎么做!今天被我找到啦,谢谢了@!
18 楼 superxgz 2010-11-26  
有个小BUG,用上向方向键移动选择,按下回车键后,hiddenId控件并不能被赋值,
但用鼠标点就可以赋值
19 楼 joknm 2010-12-14  
superxgz 写道
有个小BUG,用上向方向键移动选择,按下回车键后,hiddenId控件并不能被赋值,
但用鼠标点就可以赋值


+1

已修改!

最近比较忙,最近才看到,不好意思。
  相关解决方案