官网: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. CentOs Linux 分区建议

    硬盘分区方案 在计算机上安装Linux系统,对硬盘进行分区是一个非常重要的步骤,下面介绍几个分区方案. (1)方案1(桌面)/boot:用来存放与Linux系统启动有关的程序,比如启动引导装载程序等, ...

  2. PHP利用微信跳转的Code参数获取用户的openid

    //获取微信登录用户信息function getOpenID($appid,$appsecret,$code){   $url="https://api.weixin.qq.com/sns/ ...

  3. js中使用使用原型(prototype)定义方法的好处

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函 ...

  4. PHP中使用多线程

    <?php while(1)//循环采用3个进程 { //declare(ticks=1); $bWaitFlag= FALSE; // 是否等待进程结束 //$bWaitFlag = TRUE ...

  5. maven项目转eclipse工程的命令:eclipse.bat

    call mvn clean:clean call mvn eclipse:eclipse -DdownloadSources=true @pause 复制以上内容,保存为eclipse.bat 以后 ...

  6. Android基于GridView实现的翻牌游戏效果

    好久没有写博客了,上一篇博文距现在都有三个多月了,实在是惭愧.但是这段时间仍然是在忙于项目或是自我充电.这几天实现了一个基于GridView的翻牌动画效果,这里就将其整理出来同各位分享. 一.整体介绍 ...

  7. Can’t create handler inside thread that has not called Looper.prepare()

    1)在Android 2.3以前,为防止ANR(Application Not Responding),Google是不赞成将网络连接等一系列耗时操作直接放到应用主线程进行的,推荐将这类操作放在子线程 ...

  8. PL/SQL数据导入导出浅谈(1)

    近来需要通过PL/SQL向Oracle中导数据,特此总结一下 试例表:test 字段:id;name;org; 1.直接复制粘贴(当数据量不是特别大的时候) 1)使用select * from tes ...

  9. 【CSS】盒模型+选择器(你选择的要操作的对象)

    盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的w ...

  10. 【BZOJ 2744 】[HEOI2012]朋友圈

    Description 在很久很久以前,曾经有两个国家和睦相处,无忧无虑的生活着.一年一度的评比大会开始了,作为和平的两国,一个朋友圈数量最多的永远都是最值得他人的尊敬,所以现在就是需要你求朋友圈的最 ...