论坛首页 Web前端技术论坛

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

浏览 9161 次
精华帖 (0) :: 良好帖 (2) :: 新手帖 (3) :: 隐藏帖 (6)
作者 正文
   发表时间:2010-10-01   最后修改:2010-12-14
/**
 * @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 封装的冲突问题。
      被表单自动完成提示遮照的问题。
  • 大小: 52 KB
   发表时间:2010-10-08  

很不错哈,如果加上分页功能就更不错了。

0 请登录后投票
   发表时间:2010-10-09  
不错,正好用到,多谢
0 请登录后投票
   发表时间:2010-10-09  
jquery-1.4.2.min.js这个文件都没有…
0 请登录后投票
   发表时间:2010-10-10  
太好了,正需要呀
0 请登录后投票
   发表时间:2010-10-10  
rockethj8 写道
jquery-1.4.2.min.js这个文件都没有…


已重新上传。
0 请登录后投票
   发表时间:2010-10-11  
不错的想法
0 请登录后投票
   发表时间:2010-10-11  
确实蛮不错的, 不过跟Google suggest还是有些不一样的, 后者鼠标移到列表还是呈箭头状, 不知是否先入为主的缘故, 感觉这样舒服点, lz可以考虑修改一下
0 请登录后投票
   发表时间:2010-10-12  
ricoyu 写道
确实蛮不错的, 不过跟Google suggest还是有些不一样的, 后者鼠标移到列表还是呈箭头状, 不知是否先入为主的缘故, 感觉这样舒服点, lz可以考虑修改一下

+1

已修改。
0 请登录后投票
   发表时间:2010-10-13  
现在完美了,以后会在我的项目中用到
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics