• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 自制基于jQuery的智能提示插件一枚

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了智能提示等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
目前实现如下功能:

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请求

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-08-16解决jquery版本冲突的有效方法
  • 2017-08-16$.each遍历对象、数组的属性值并进行处理
  • 2017-08-16JQuery组件基于Bootstrap的DropDownList(完整版)
  • 2017-08-16jQuery选择器源码解读(二):select方法
  • 2017-08-16jquery中的过滤操作详细解析
  • 2017-08-16使用jquery如何获取时间
  • 2017-08-16jQuery UI Dialog 创建友好的弹出对话框实现代码
  • 2017-08-16利用jQuery实现可输入搜索文字的下拉框
  • 2017-08-16jquery图片延迟加载 前端开发技能必备系列
  • 2017-08-16jQuery使用$.ajax进行即时验证的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery使用ul模拟select实现表单美化的方法
    • jQuery显示hide和隐藏hide
    • jQuery实现可以控制图片旋转角度效果(附demo源码下载)
    • JQuery实现鼠标移动到图片上显示边框效果
    • jQuery EasyUI API 中文文档 - ComboGrid 组合表格
    • JQuery中操作Css样式的方法
    • jquery阻止后续事件只执行第一个事件
    • jQuery基于ID调用指定iframe页面内的方法
    • JS在IE下缺少标识符的错误
    • jquery选择器(常用选择器说明)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有