• jQuery UI AutoComplete的使用


    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能。原本的实现是一个Dialog ,现打算将其改为AutoComplete。

    框架使用的是jQuery UI Autocomplete 1.8.23。 据说jquery.autocomplete很好,但还是用框架已经引入的吧。

    开工吧,先进菜鸟里面实践实践,找找感觉。

    基础的Demo,很简单只要这样就可以了

    再改改参数

    一个基础功能的AutoComplete就完成了。

    --------------------------------------------------------------------------------------------此处分割

    AutoComplete 提供了足够用的方法、事件

    常用参数如下

    1.Source:用于指定数据来源,类型为String、Array、Function

    •   String:当使用一个字符串,Autocomplete 插件希望该字符串指向一个能返回 JSON 数据的 URL 资源。
    •   Array:可用于本地数据的一个数组。支持两种格式: 字符串数组:[ "Choice1", "Choice2" ] 带有 label 和 value 属性的对象数组:[ { label: "Choice1", value: "value1" }, ... ]
    •   Function(request, response):第三个变量,一个回调函数,提供最大的灵活性,可用于连接任何数据源到 Autocomplete。通过request.term获得输入的值,response([Array])来呈现数据。

    2.minLength: 执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据,通常设置为零,但是当单个字符搜索会匹配几千项条目时,设置个高数值是很有必要的。

    3.autoFocus:如果设置为 true,当菜单显示时,第一个条目将自动获得焦点

     对于source的三个数据来源,我使用了Array。这对我功能的实现已经够用。如果想要对获取的值进行再一步加工的话,可以使用Function。Function的灵活性更高些,通过request.term获得输入的值,response([Array])来呈现数据

    对于事件,举个栗子

    当想要焦点移动到一个条目上(未选择)时,将某控件上赋值则可使用focus事件监听,形如这样

    当想要光标刚键入控件,就查询出全部。可通过search方法。就不一一列举了。可以多试试

    原本Source用Function写了,后来发现其实很简短的代码就可以完成了,不需要Function,也不需要刻意写成{label : xx ,value :xx}格式

     

  • 相关阅读:
    Word转pdf
    jquery 中json数组的操作 增删改
    Js、Jquery定时执行(一次或者重复多次,取消重复)
    sql server 2008 (不允许保存更改,您所做的更改要求删除并重新创建以下表) 的解决办法
    C#中 ArrayList 的使用
    Jquery正则表达式公式
    C#判断字符串是否存在字母及字符串中字符的替换实例
    纳闷的EF异常:在提供程序连接上启动事务时出错
    C# WinForm获取当前路径汇总
    Entity Framwork 6 编译出错的问题(VS2012)
  • 原文地址:https://www.cnblogs.com/zhaoww/p/6010984.html
Copyright © 2020-2023  润新知