您的位置：首页 > Web前端 > JQuery

仿百度搜索自动输入提示功能JQuery Autocomplete

2013-09-12 13:07 921 查看

官方网址：http://api.jqueryui.com/autocomplete/

官方案例：http://jqueryui.com/autocomplete/

大概效果如下图

此功能最主要的参数是source，所以放到最前面来写

source

设置匹配菜单中的数据项，设置方式：

1、string数组参数，格式：["Choice1","Choice2"]

例如，初始化时：

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

初始化后
//getter
varsource=$(".selector").autocomplete("option","source");

//setter
$(".selector").autocomplete("option","source",["c++","java","php","coldfusion","javascript","asp","ruby"]);
2、object数组参数，格式[{label:"Choice1",value:"value1"},...]

其中label是在匹配菜单中显示项的值，而value，是选中此匹配项后，append到<input>中的真实值

3、string参数

如果是string参数，则是指定一个远程的数据源，然后当<input>中有输入变化，即change事件后，会自动将输入的内容，以GET方式发送到远程数据源，其中输入内容以term参数保存；

例如，参数为http://remoteSource，那么在用户输入abc后，将会发送一个GET请求如http://remoteSource?term=abc

返回的结果必须以json格式，数据格式如上面1、2描述

4、function参数，格式 Function( Object request, Function response( Object data
))

这种参数最灵活，可以让你以自己的方式向服务器发出查询，并自己解析数据，最后将数据回写到response即可

$(".selector").autocomplete({
source:function(request,response){
//获取用户输入
varterm=request.term;
//根据自定义方式从服务器获取数据
...
//还可以自己解析数据
..
//最后把数据按照前面1、2描述的格式，放到response中
response(data);
}
});
[b]功能支持：[/b]

此自动补全功能，支持<input><textarea>或者有

contenteditable

属性的标签

键盘操作：

1、上下键可以选择匹配项

2、esc建可以关闭匹配菜单

3、enter建可以选择当前选中的匹配项

4、pageuppagedown可以操作匹配菜单中的滚动条

CSS：

1、ui-autocomplete：匹配菜单中匹配项的css属性

2、ui-autocomplete-input：输入框的属性

依赖：

<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

appendTo：

指定匹配菜单中的匹配项，将匹配内容补填到哪个标签；一般都是默认补填到<input>标签中

初始化时，用如下方式设置：

$(".selector").autocomplete({appendTo:"#someElem"});初始化后，用如下方式设置获取
//getter
varappendTo=$(".selector").autocomplete("option","appendTo");

//setter
$(".selector").autocomplete("option","appendTo","#someElem");

autoFocus:

默认为false，设置成true时，则匹配菜单中的第一个匹配项，会默认被选中，效果如下图：

初始化：

$(".selector").autocomplete({autoFocus:true});

初始化后：
//getter
varautoFocus=$(".selector").autocomplete("option","autoFocus");

//setter
$(".selector").autocomplete("option","autoFocus",true);

delay

设置输入时，键盘按键后，匹配菜单显示的延时时间
初始化：

$(".selector").autocomplete({delay:500});

初始化后：

//getter

vardelay=$(".selector").autocomplete("option","delay");

//setter

$(".selector").autocomplete("option","delay",500);

disabled

禁用

初始化：

$(".selector").autocomplete({disabled:true});

初始化后：

//getter
vardisabled=$(".selector").autocomplete("option","disabled");

//setter
$(".selector").autocomplete("option","disabled",true);

minLength

出现匹配菜单的最小必输长度

初始化：

$(".selector").autocomplete({minLength:0});初始化后：
//getter
varminLength=$(".selector").autocomplete("option","minLength");

//setter
$(".selector").autocomplete("option","minLength",0);

position

设置匹配菜单的相对位置

默认值{my:"lefttop",at:"leftbottom",collision:"none"}

初始化

$(
".selector"
).autocomplete({position:{my:"righttop",
at:"rightbottom"
}});

初始化后

//getter

varposition=$(".selector").autocomplete("option","position");

//setter

$(".selector").autocomplete("option","position",{my:"righttop",at:"rightbottom"});

剩下的是一些方法和事件，都比较容易理解，就不一一翻译了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航