zoukankan      html  css  js  c++  java
  • 自制jQuery智能提示插件一枚

    2011-9-2更新:
    增加width属性,每个同一个页面每个智能提示窗口可自定义
    	{220}
    增加hidden属性,用来保存智能提示结果对应的id,请传入一个具有value属性的form元素,比如hidden,input等
    	可以为DOM元素,也可以为jQuery对象
    	{hidden:$("#hiduid")},{hidden:document.getElementById("hiduid")}
    	以前是需要自己取该文本框的qid
    	现在同样可以在提交前值qid赋值给自定义的元素
    改善保存id的流程
    	所有取结果对应的id的,都是为了传递结果对应的数据库主键
    	假如仅仅是用文本框里面的字符进行模糊匹配,这些选项都无意义
    	此次修改主要优化了对隐藏id的处理
    一些键盘操作的改进
            只有在正常输入的情况下,才会清除当前文本框的结果id(即qid)
            所以,esc和tab键不会清除最后一次有效选择的id
    

     下载地址及SVN地址同样见:http://code.google.com/p/jq-intellisense-autocomplete/

    P.S. 有人发邮件跟我说提示框错位的问题,我自己的一个项目中也遇到了,原因是最外层的容器设了margin或padding,我在body的第一个元素写一个 居然解决了。。

    一个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=true打开
      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 下载地址:google code

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

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

    图一,默认视图

    图二,多列视图

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

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

  • 相关阅读:
    在GridView1的RowEditing获取GridView1里面绑定的某一字段
    仿淘宝网站的导航标签效果!
    ASP.NET Cookies简单应用 [ASP.NET | Cookies]
    UpdatePanel使用时注意说明
    Asp.net(C#)显示所有缓存 清除所有缓存
    计算字符在字符串是出现的次数
    新接触了ActionScript3.0 拿出来晒晒~
    转载Windows XP_32bit、Windows 7_32bit、Windows 7_64bit乱序任意安装方法
    新博客庆祝
    Android 电视关闭的动画效果
  • 原文地址:https://www.cnblogs.com/walkerwang/p/1956918.html
Copyright © 2011-2022 走看看