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

最新推荐文章于 2019-03-11 22:00:00 发布

joknm

最新推荐文章于 2019-03-11 22:00:00 发布

阅读量157

点赞数

分类专栏： JS 文章标签： Google jQuery json IE Firefox ViewUI

JS 专栏收录该内容

1 篇文章

订阅专栏

介绍了一个基于jQuery实现的类似Google搜索提示的功能插件，该插件支持IE和Firefox等浏览器，并解决了与其它JS封装的冲突问题以及浏览器自动完成功能遮挡等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/**
 * @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 // 提示列表宽度，可选
		});