自制基于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 相关文章推荐
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
Mar 01 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
JS开发自己的类库实例分析
Aug 28 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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高级OOP技术演示
2009/08/27 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python图书管理系统
2020/04/05 Python
python如何调用字典的key
2020/05/25 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
售后主管岗位职责
2013/12/08 职场文书
创业大赛策划书
2014/03/01 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
2014年终个人总结报告
2015/03/09 职场文书
学校德育工作总结2015
2015/05/11 职场文书
幼儿园辞职信
2015/05/13 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
话题作文之呼唤
2019/12/18 职场文书