`
joknm
  • 浏览: 62860 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

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

    博客分类:
  • JS
阅读更多
/**
 * @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
分享到:
评论
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  
不错啊!学习了!

相关推荐

    Ajax和Jquery实现谷歌百度搜索下来提示

    总的来说,这个项目结合了Ajax、jQuery和C#,利用Microsoft Visual Studio 2008作为开发工具,实现了类似谷歌和百度搜索框的下拉提示功能。通过Ajax技术,用户在输入搜索词时可以实时看到匹配的搜索建议,提升了用户...

    jquery Autocomplete 仿百度搜索 只能搜索提示

    本项目以"jQuery Autocomplete 仿百度搜索 只能搜索提示"为主题,旨在通过ASP.NET平台,构建一个类似于Google搜索的实时提示功能,并提供了完整的源码和数据库支持。 首先,jQuery Autocomplete是jQuery UI库中的一...

    .net+jquery仿google智能提示

    标题中的".net+jquery仿google智能提示"是指利用.NET技术和jQuery库来创建一个类似于Google搜索框的智能提示功能。这个功能通常在用户输入时,能够根据已有的数据提供实时的建议,提高用户的输入效率和用户体验。 ...

    一个纯js模式的类似于Google的搜索查询输入框程序例子

    在IT领域,尤其是在前端开发中,创建一个类似于Google搜索查询输入框的功能是一项常见的任务。这个例子采用纯JavaScript实现,提供了一种高效且灵活的方式来进行模糊搜索。以下将详细阐述相关知识点: 1. **纯...

    jquery 模拟类搜索框自动完成搜索提示功能(改进)

    在本示例中,我们探讨的是如何使用jQuery实现一个类似于Google搜索框的自动完成功能,即用户在输入框中输入文字时,系统会根据输入自动显示相关建议。这个功能通过`autopoint.js`脚本实现,它依赖于jQuery库。 首先...

    jquery仿google自动提示

    在Web开发中,用户输入体验是至关重要的,而Google的搜索框自动提示功能就是一种提升用户体验的经典设计。通过使用jQuery库,开发者可以轻松实现类似的功能,为用户提供实时的搜索建议,从而提高搜索效率。本篇文章...

    类似GOOGLE和BAIDU搜索提示功能的用户控件

    在IT行业中,构建类似GOOGLE和BAIDU搜索提示功能的用户控件是一项常见的需求,它能够提升用户体验,提供即时的搜索建议,帮助用户更快地找到目标信息。这个控件通常被称为自动完成或搜索建议组件。下面将详细介绍...

    (jsp+ajax)实现了类似google的搜索引擎(源代码)

    【标题】:“(jsp+ajax)实现了类似google的搜索引擎(源代码)”是一个基于JSP、AJAX和JavaScript技术构建的Web应用项目,旨在提供一种类似于谷歌搜索引擎的用户体验。这个项目的核心在于利用AJAX实现动态数据交互,...

    仿谷歌搜索提示

    5. UI设计:为了实现类似谷歌的搜索提示效果,我们需要关注UI细节,如提示框的样式、动画效果等。CSS(层叠样式表)可以用来控制元素的布局和外观,确保提示框与页面其他元素和谐共存。 6. 性能优化:考虑到实时性...

    Jquery模仿Baidu、Google搜索时自动补充搜索结果提示

    这篇关于“Jquery模仿Baidu、Google搜索时自动补充搜索结果提示”的技术分享,主要阐述了如何使用Jquery实现类似百度、谷歌搜索引擎中常见的自动提示功能。 首先,关键词“Jquery”是目前前端开发中广泛使用的...

    jquery 诱导输入插件 支持多控件传值和回填

    这种功能常见于搜索框,当用户开始输入关键词时,插件会自动显示与输入内容匹配的建议列表,类似于Google搜索的下拉提示。 在描述中提到的"支持多控件传值和回填",这意味着该插件不仅限于单个输入框,而是可以同时...

    仿百度,谷歌输入框自动提示功能---JSON版

    通过以上分析,我们可以看出实现一个类似百度、谷歌的自动提示功能不仅需要熟练掌握前端技术如jQuery,还需要了解JSON数据格式以及如何高效地进行前后端数据交换。此外,良好的用户体验也是不可忽视的一环,包括合理...

    Jquery google_活动日历

    以下将详细讨论如何使用jQuery来实现一个类似Google活动日历的功能。 1. **jQuery基础** 在开始之前,确保你已经理解了jQuery的基本用法,包括选择器、DOM操作、事件处理和动画效果。这将帮助你更好地理解和实现...

    jquery - 1.4.2 仿google+圈子加成员效果

    本文将深入探讨“jquery - 1.4.2 仿google+圈子加成员效果”这一主题,旨在解析如何利用jQuery 1.4.2版本实现类似Google+圈子邀请成员的功能。 首先,我们要理解Google+圈子的核心功能:用户可以创建圈子,并邀请...

    ( java+jquerygoogle百度搜索自动提示效果.

    该主题涉及到使用Java和jQuery实现类似Google或百度搜索框的自动提示效果。这个功能常见于许多网站的搜索框,当用户输入关键词时,系统会实时提供相关的搜索建议。以下是相关知识点的详细说明: 1. **中文参数处理*...

    php+ajax仿百度谷歌搜索下拉效果

    在IT行业中,实现类似百度和谷歌的搜索下拉效果是一项常见的需求,这能极大地提升用户体验。本项目以"php+ajax"技术栈为基础,旨在创建一个动态的搜索建议功能,让用户在输入关键字时就能看到相关的搜索建议,无需...

    模拟google自动提示

    标题中的“模拟google自动提示”指的是创建一个功能类似于Google搜索框的自动补全功能,它能够在用户输入时提供预测性的搜索建议。这个功能通常用于提高用户体验,减少用户输入时间,并帮助用户更快地找到他们可能在...

    Ajax仿Google搜索提示ASP+Access数据库版

    **Ajax仿Google搜索提示ASP+Access数据库版** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。Google Suggest是Google搜索引擎中的一个特性,它会在用户输入...

    google首页提示框完整代码

    综上所述,这个压缩包提供了一个实现类似Google首页提示框功能的完整实例。通过分析和学习这些文件,开发者可以了解到如何使用HTML构建基本结构,如何利用CSS进行样式设计,以及如何运用jQuery进行动态效果和交互的...

    仿百度、Google搜索效果 AutoComplete

    仿百度、Google搜索效果的AutoComplete旨在提供与这两家知名搜索引擎类似的用户体验,即当用户在搜索框输入内容时,系统会实时分析并推荐相关的搜索建议,以下拉列表的形式呈现,帮助用户快速找到目标信息。...

Global site tag (gtag.js) - Google Analytics