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

2022-01-11,,,,

一个ajax智能提示/补全插件,以前自己用的,现在干脆把它做成插件,需要的朋友可以参考下。

目前实现如下功能:

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+打开网站

图一,默认视图

图二,多列视图

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

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

您可能感兴趣的文章:

  • 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
  • JQuery扩展插件Validate―4设置错误提示的样式
  • jQuery 表单验证插件formValidation实现个性化错误提示
  • qTip2 精致的基于jQuery提示信息插件
  • jQuery 插件仿百度搜索框智能提示(带Value值)
  • jQuery带箭头提示框tooltips插件集锦
  • JQuery实现简单时尚快捷的气泡提示插件
  • jquery.cvtooltip.js 基于jquery的气泡提示插件
  • jQuery提示插件alertify使用指南
  • jquery插件制作 提示框插件实现代码
  • jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
  • jQuery提示插件qTip2用法分析(支持ajax及多种样式)

  • 智能提示

相关文章

  • jQuery+Ajax实现无刷新分页

    这篇文章主要介绍了jQuery+Ajax实现无刷新分页,本文使用的生成分页的工具条是jquery.pagination.js,感兴趣的小伙伴们可以参考一下 2015-10-10

  • jQuery 标题的自动翻转实现代码

    我们平时在开发web程序的时候,想把一个新闻源滚动显示新闻的条目的标题及内容摘要,而且是每次一条,有点类似csdn的滚动广告。 2009-10-10

  • jQuery formValidator表单验证插件开源了 含API帮助、源码、示例

    ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态。 2008-08-08

  • jquery处理checkbox(复选框)是否被选中实例代码

    这篇文章主要介绍了jquery处理checkbox(复选框)是否被选中实例代码的相关资料,需要的朋友可以参考下 2017-06-06

  • jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件,接下来通过本文给大家介绍jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载),需要的朋友参考下 2016-02-02

  • jMessageBox 基于jQuery的窗口插件

    在WinForm程序开发中,经常用MessageBox弹出某些提示,功能虽简单但却非常的实用!而在Web页面中,浏览器也提供了Alert或Confirm等脚本语句用于弹出提示窗口 2009-12-12

  • jQuery基础知识小结

    本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结,非常的详尽,推荐给有需要的小伙伴。 2014-12-12

  • jquery实现上传文件大小类型的验证例子(推荐)

    下面小编就为大家带来一篇jquery实现上传文件大小类型的验证例子(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随想过来看看吧 2016-06-06

  • jquery插件实现扫雷游戏(2)

    这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏第二篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2021-04-04

  • 读jQuery之三(构建选择器)

    前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成,以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。 2011-06-06

最新评论

大家感兴趣的内容

  • 1jquery加载页面的方法(页面加载完
  • 2Jquery获取和修改img的src值的方
  • 3jQuery判断checkbox是否选中的3种
  • 4jquery获取复选框被选中的值
  • 5JQuery 绑定select标签的onchang
  • 6JQuery判断radio(单选框)是否选
  • 7jquery $(document).ready() 与w
  • 8jquery判断元素是否隐藏的多种方
  • 9jquery 将disabled的元素置为ena
  • 10jquery中获取id值方法小结

最近更新的内容

  • 使用JavaScript+canvas实现图片裁剪
  • jQuery学习之DOM节点的插入方法总结
  • jquery 图片Silhouette Fadeins渐显效果
  • jQuery命名空间与闭包用法示例
  • 简述jQuery Easyui一些用法
  • jQuery删除节点的三个方法即remove()deta
  • JQuery中的常用事件、对象属性与使用方法
  • jQuery实现高级检索功能
  • 详解Bootstrap的iCheck插件checkbox和rad
  • jQuery实现的跨容器无缝拖动效果代码

常用在线小工具

微信投稿脚本任务在线工具

关注微信公众号

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 本站 版权所有

以上就是自制基于jQuery的智能提示插件一枚的详细内容,更多请关注本站其它相关文章!

《自制基于jQuery的智能提示插件一枚.doc》

下载本文的Word格式文档,以方便收藏与打印。