自制基于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 相关文章推荐
JavaScript Function函数类型介绍
Apr 08 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
js实现交通灯效果
Jan 13 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 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网站判断用户是否是手机访问的方法
2013/11/01 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php数组随机排序实现方法
2015/06/13 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python Scrapy框架原理解析
2021/01/04 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
事业单位请假制度
2014/01/13 职场文书
幼儿老师求职信
2014/06/30 职场文书
励志演讲稿200字
2014/08/21 职场文书
铁路安全反思材料
2014/12/24 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
公司档案管理制度
2015/08/05 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书