现场提出优化单,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}格式

jQuery UI AutoComplete的使用的更多相关文章

  1. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  2. jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  3. jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  4. jQuery UI Autocomplete是jQuery UI的自动完成组件(share)

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  5. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  6. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. jQuery.ui autoComplete使用

    官网  http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...

  8. jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框

    $("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...

  9. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

随机推荐

  1. Arcgis API For IOS扩展AGSDynamicLayer新旧版API对比

    AGSDynamicLayer(ForSubclassEyesOnly) Category Reference Description This category organizes the meth ...

  2. [UCSD白板题] Take as Much Gold as Possible

    Problem Introduction This problem is about implementing an algorithm for the knapsack without repeti ...

  3. DB2 错误信息码

    000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 +098 01568 动态SQL语句用分号结束 +1 ...

  4. 简单的OkHttp使用介绍

    Android系统提供了两种HTTP通信类,HttpURLConnection和HttpClient.关于HttpURLConnection和HttpClient的选择>>官方博客尽管Go ...

  5. poj 1195 - Mobile phones(树状数组)

    二维的树状数组,,, 记得矩阵的求和运算要想好在写.... 代码如下: #include <cstdio> #include <cstdlib> #include <cm ...

  6. WLAN信道

  7. java 并发性和多线程 -- 读感 (二 线程间通讯,共享内存的机制)

    参考文章:http://ifeve.com/java-concurrency-thread-directory/ 其中的竞态,线程安全,内存模型,线程间的通信,java ThreadLocal类小节部 ...

  8. React Native移动框架功能研究

    React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...

  9. 用c#开发微信 系列汇总

    网上开发微信开发的教程很多,但c#相对较少.这里列出了我所有c#开发微信的文章,方便自己随时查阅.   一.基础知识 用c#开发微信(1)服务号的服务器配置和企业号的回调模式 - url接入 (源码下 ...

  10. CentOs笔记

    系统 CentOs7,最小安装,使用 Ext4,/ ,/boot,/swap 使用标准分区,另一个分区做为数据分区,使用 LVM. 更新: http://mirrors.163.com/.help/c ...