At.js实现的输入框参数提示
秦承安
At.js(https://github.com/ichord/At.js)是GitHub上的一个开源项目，MIT授权，主要用来实现类似于微博人人输入@后显示候选好友列表的功能，具体效果可参见官方Demo: http://ichord.github.io/At.js/ 。本文基于版本v0.4.0。
官网上有example.html，但略显复杂，其实At.js的基本使用相当简单，除了作为基础的jquery.js，只需要一个js文件和一个css文件，共三个资源：
- jquery,js
- jquery.atwho.js
- jquery.atwho.css
然后定义一个输入框，再用js为该输入框设定关键字和候选数据即可。最简单的例子如下：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>at.js demo</title>
<link rel="stylesheet" type="text/css" href="styles/jquery.atwho.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.atwho.js"></script>
<script>
$(function(){
$('.inputor').atwho({
at: "@",
data: ["aaa","bbb","ccc"]
});
});
</script>
</head>
<body>
<input id="inputor" class="inputor" name="at" style="width:1000px;height:30px;"/>
</body>
</html>
我的项目中需要实现输入框的参数提示功能，即对类似(type,param1,param2)的输入，由type的值决定param1和param2的候选数据，并区分两个逗号，为”,param1"和”,param2”显示分别的候选数据，简化代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>at.js demo</title>
<link rel="stylesheet" type="text/css" href="styles/jquery.atwho.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.atwho.js"></script>
<script>
$(function(){
var types = ["NUM","CHAR"];
var param1;
var param2;
var commaCount;
$('.inputor').atwho({
at: "(",
data: types,
callbacks: {
/* What to do before insert item's value into inputor.
@param value [String] content to insert
@param $li [jQuery Object] the chosen item */
before_insert: function(value, $li) {
switch(value.substr(1,value.length-1)){
case "NUM":
param1 = [{name: '1'},{name: '2'}];
param2 = [{name: '3'},{name: '4'}];
break;
case "CHAR":
param1 = [{name: 'a'},{name: 'b'}];
param2 = [{name: 'c'},{name: 'd'}];
break;
}
return value;
}
}
});
$('.inputor').atwho({
at: ",",
callbacks: {
/* It would be called to match the `flag`.
It will match at start of line or after whitespace
@param flag [String] current `flag` ("@", etc)
@param subtext [String] Text from start to current caret position.
@return [String | null] Matched result. */
matcher: function(flag, subtext, should_start_with_space) {
var match, regexp;
flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
if (should_start_with_space) {
flag = '(?:^|\\s)' + flag;
}
regexp = new RegExp(flag + '([A-Za-z0-9_\+\-]*)$|' + flag + '([^\\x00-\\xff]*)$', 'gi');
match = regexp.exec(subtext);
if (match) {
var i;
commaCount = 0;
for(i=0;i<subtext.length;i++){
if(subtext.charAt(i) == ","){
commaCount++;
}
}
return match[2] || match[1];
} else {
return null;
}
},
/* Filter data by matched string.
@param query [String] Matched string.
@param data [Array] data list
@param search_key [String] key char for seaching.
@return [Array] result data.*/
filter: function(query, data, search_key) {
if(commaCount == 1){
return param1;
}
else if(commaCount == 2){
return param2;
}
}
}
});
});
</script>
</head>
<body>
<input id="inputor" class="inputor" name="at" style="width:1000px;height:30px;" autocomplete = "off"/>
</body>
</html>
此例实现了对(NUM,[1,2],[3,4])和(CHAR,[a,b],[c,d])的输入提示，关键在于三个回调函数：
- 在关键字”(”的before_insert函数中根据当前insert的值对param1和param2填充不同的数据。
- 在关键字“,”的matcher函数中计算当前输入框中内容(subtext)中逗号的个数(commaCount)。
- 在关键字”,”的filter函数中根据逗号的个数(commaCount)判断当前是第几个逗号，并相应返回param1或param2。
另外，可在input标签内添加autocomplete = “off”来关闭浏览器的自动提示功能，避免冲突。
新址：http://www.limisky.com/101.html
类似资料：