官网:http://jqueryui.com/autocomplete

最简单的形式:

var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
 
];
$( "#tags" ).autocomplete({
source: availableTags
});

数据源source有多种形式:

source:

Type: Array or String or FunctionObject request, Function response( Object data ) )

Default: none; must be specified
Defines the data to use, must be specified.

Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.

Multiple types supported:

  • Array: An array can be used for local data. There are two supported formats:

    • An array of strings: [ "Choice1", "Choice2" ]
    • An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

    The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only valueproperties, the value will also be used as the label.

  • String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.
  • Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
    • request object, with a single term property, which refers to the value currently in the text input.(输入框的值) For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
    • response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

    When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It'll take a single string argument and escape all regex characters, making the result safe to pass to new RegExp().

Code examples:

Initialize the autocomplete with the source option specified:

1
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

Get or set the source option, after initialization:

var source = $( ".selector" ).autocomplete( "option", "source" );
 
// setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );、
 
这个很有用,有时我们想在初始化后改变source的值。向下面的例子中:
 var  Cache=[];

    var firstLoaded=true;
$(".input").autocomplete({
minLength:,
source: Cache
}).focus(function(){
var that=$(this); if(firstLoaded)
{
var ret=[];
$.getJSON('url',{},function(data){
for(var i in data)
{
ret.push(data[i]);
} Cache=ret;
firstLoaded=false; that.autocomplete({ source: Cache});//一定要重新载入
that.autocomplete('search'); });
}
else
{
that.autocomplete('search');
} });

我以为在初始化是

 source: Cache指向的是引用,ajax更改了cache的值应该会起作用的,可是事与愿违,必须,重新调用
that.autocomplete({ source: Cache});方可起作用。

上面的例子也演示了如何当input获得焦点时立即显示自动完成。这里有2个关键字。

focus函数,调用autocomplete触发search,还有一点是设置maxLength为0,因为search函数Triggered before a search is performed, after minLength and delay are met. If canceled, then no request will be started and no items suggested.

 

jquery ui autoComplete自动完成的更多相关文章

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

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

  2. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

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

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

  4. jQuery UI AutoComplete的使用

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

  5. Jquery ui autocomplete简单api

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

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

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

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

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

  8. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

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

  9. jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...

随机推荐

  1. Poj OpenJudge 1068 Parencodings

    1.Link: http://poj.org/problem?id=1068 http://bailian.openjudge.cn/practice/1068 2.Content: Parencod ...

  2. nodejs remote链接mysql数据库总结

    nodejs链接远端mysql,这个折腾了一个上午才搞定.本以为,直接使用就OK了,但是发现不行,后来查阅各种资料后,终于找到了方法. nodejs链接远端数据库主要分为几个步骤: 1)安装node- ...

  3. myeclipse 8.5 破解

    步骤: (1)新建一个java project项目 (2)在src目录下新建一个名为MyEclipseGen的Java文件(MyEclipseGen.java) (3)MyEclipseGen.jav ...

  4. input属性disabled和readonly的区别

    两种属性的写法如下: 1.<input type="text" name="name" value="xxx" disabled=&q ...

  5. 纯CSS实现多选组件

    mark: http://blog.meathill.com/tech/fe/create-multiple-select-component-with-pure-css.html Demo: 小宝3 ...

  6. class_create(),device_create自动创建设备文件结点

    class_create(),device_create自动创建设备文件结点 从linux 内核2.6的某个版本之后,devfs不复存在,udev成为devfs的替代.相比devfs,udev有很多优 ...

  7. Linux 配置Samba

    配置Samba 如果没有普通用户,添加用户,指令: useradd -m aaa passwd bbb 添加Samba用户指令: smbpasswd -a aaa passwdword: …… 修改配 ...

  8. 正则表达式通过Unicode属性匹配

    原文链接:http://zochen.iteye.com/blog/690716 Unicode 编码并不只是为某个字符简单定义了一个编码,而且还将其进行了归类. \pP 其中的小写 p 是 prop ...

  9. 常见架构TLB miss处理方法(转)

    转自网站:http://blog.sina.com.cn/s/blog_633f462901018reb.html 0.       综述 总的来说TLB miss处理分为硬件处理和软件处理两种,硬件 ...

  10. Asp.Net MVC结合ExtJs gridPanel 分页和高度自适应

    Ext.onReady(function () { gridPanel(); var panel = Ext.getCmp('gridPanel'); window.onresize = functi ...