自制基于jQuery的智能提示插件一枚


Posted in Javascript onFebruary 18, 2011

目前实现如下功能:

1 最基本需求,根据当前文本框字符取出适配数据
  1.1 支持同一页面多个元素调用本插件
  1.2 必需的参数是url
  1.3 对于连续不断地输入,会把之前的ajax请求全部取消,避免造成服务器无谓的压力(图4)
  1.4 最基本调用$("myel").autoCmpt({url:"url"});
2 空关键词查询开关(emptyRequest),打开则鼠标点在输入框内即出现提示(当下拉列表用),默认为true(图1)
3 支持关联查询,即当前文本框的提示结果可依据页面另一个元素的取值
  3.1 只支持一个关联元素(即父元素),用参数parentID定义,(默认null)
  3.2 在打开了parentID选项的情况下,假如参数定义useParentValue=false(默认),则插件会取其自定义属性进行过滤(关联),否则(true),会取该元素的value属性关联
    3.2.1 鉴于上述情况,在useParentValue属性为假时,该元素必须为调用了本插件的元素,
    3.2.2 当useParentValue属性为真是,该元素必须为表单元素(即必须有value属性),但不必要是智能提示元素
    3.2.3 不定义parentID,则此项无意义
    3.2.4 定义了parentID的情况下,必须parent元素有值,否则也不会出现提示
4 支持缓存最后查询的结果。(页面多个元素调用的情况下,同样会判断最后一次触发提交的元素来确定是否使用缓存)
  4.1  目前只支持了缓存一个元素的一次结果,有时间的话可考虑扩展成每个元素的最后一次查询结果都缓存起来
5 默认效果见图1,包含:
  5.1 每项的文字描述
  5.2 每项的拼音简拼(如果有)
  5.3 每项对应的数据库的主键值(如果有),不可见
6 多列视图,解决大量短信息的排列(比如人名),(图2)
  6.1 用multi=false打开
  6.2 拼音选项不可见
  6.3 主键值不可见,但是仍然存在
  6.4 只有在取出的记录数大于32时才可用(4*8,目前这个值不可配,跟CSS强关联了,假如你更改了CSS,主要指提示框的宽度,那么请自行更改成合适的效果)。
7 数据过多可分页
  8.1 目前不支持配置每页显示数
  8.2 目前不支持往回翻页
  8.3 如果该元素选项为multi=true,会智能判断下一页条目数量,达到数量条件会自动变成多列视图,否则会恢复默认视图(图3)
8 响应的键盘命令有
  ↑ ←:上一条
  ↓ →:下一条
  ESC取消提示
  没有拦截回车事件,会提交表单
9 对后台返回的数据格式有要求,见插件内说明,目前实现四个字段:id,文字,拼音,上级id,哪怕没有值,也要送个空值回来
  9.1 就小项目用用,所以没有做过多扩展,否则可以像google一样,预留相当多的字段,以及用多维数组返回结果,现在这个做普通提示完全够用了,欢迎自己扩展
10 一般网站方案:
  10.1 google采用的是普通的ajax查询,返回一个数组,里面包含了查询条件和查询结果(本插件返回值无查询条件)
  10.2 baidu采用的ajax返回的是script,把结果做为script的参数传进来再自动执行了
  10.3 酷讯采用的是jQuery的jsonp方式,以callback的方式返回结果集(一般我用jsonp的时候是为了跨域,即处理请求的域名和当前页面域名不一致,浏览器会阻止提交)。
  10.4 本插件采用的是第一种方案。如果智能提示源不在本域,可参照百度、酷讯等的方式进行更改
11 下载地址:本地下载

SVN:http://jq-intellisense-autocomplete.googlecode.com/svn/trunk/

注:下载下来的示例项目是一个asp.net网站,需要.net framework3.5支持,发布到iis上即可运行,或用vs2008+打开网站

图一,默认视图

自制基于jQuery的智能提示插件一枚

图二,多列视图

自制基于jQuery的智能提示插件一枚

图三,当图二的情况下继续输入或翻页,结果少于单页时,自动恢复默认视图

自制基于jQuery的智能提示插件一枚

图四,演示连续输入情况下取消之前的ajax请求

自制基于jQuery的智能提示插件一枚

Javascript 相关文章推荐
js函数排序的实例代码
Jul 01 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 #Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 #Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 #Javascript
Jquery之美中不足小结
Feb 16 #Javascript
jquery的index方法实现tab效果
Feb 16 #Javascript
jQuery ready函数滥用分析
Feb 16 #Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
女大学生个人求职信
2013/12/09 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis